@primer/components 31.2.0-rc.fbb10090 → 31.2.0

package/lib/TextInputWithTokens.d.ts

@@ -44,7 +44,7 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
-}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
@@ -61,6 +61,10 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
+    block?: boolean | undefined;
+    sx?: import("./sx").BetterSystemStyleObject | undefined;
+    variant?: "small" | "large" | undefined;
+    role?: React.AriaRole | undefined;
     key?: React.Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -68,17 +72,16 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     placeholder?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
     radioGroup?: string | undefined;
-    role?: React.AriaRole | undefined;
     about?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
@@ -101,47 +104,47 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     inputMode?: "search" | "none" | "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-busy'?: boolean | "true" | "false" | undefined;
-    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-atomic'?: boolean | "false" | "true" | undefined;
+    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-busy'?: boolean | "false" | "true" | undefined;
+    'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-disabled'?: boolean | "false" | "true" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: boolean | "true" | "false" | undefined;
+    'aria-expanded'?: boolean | "false" | "true" | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
-    'aria-hidden'?: boolean | "true" | "false" | undefined;
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-grabbed'?: boolean | "false" | "true" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-hidden'?: boolean | "false" | "true" | undefined;
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-labelledby'?: string | undefined;
     'aria-level'?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: boolean | "true" | "false" | undefined;
-    'aria-multiline'?: boolean | "true" | "false" | undefined;
-    'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+    'aria-modal'?: boolean | "false" | "true" | undefined;
+    'aria-multiline'?: boolean | "false" | "true" | undefined;
+    'aria-multiselectable'?: boolean | "false" | "true" | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
     'aria-owns'?: string | undefined;
     'aria-placeholder'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-readonly'?: boolean | "true" | "false" | undefined;
+    'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+    'aria-readonly'?: boolean | "false" | "true" | undefined;
     'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: boolean | "true" | "false" | undefined;
+    'aria-required'?: boolean | "false" | "true" | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: boolean | "true" | "false" | undefined;
+    'aria-selected'?: boolean | "false" | "true" | undefined;
     'aria-setsize'?: number | undefined;
     'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;
@@ -311,15 +314,12 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
-    block?: boolean | undefined;
-    sx?: import("./sx").BetterSystemStyleObject | undefined;
     disabled?: boolean | undefined;
-    variant?: "small" | "large" | undefined;
     hasIcon?: boolean | undefined;
     contrast?: boolean | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
+}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
     selectedTokenIndex: number | undefined;
     setSelectedTokenIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
 }, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;

package/lib/TextInputWithTokens.jsx

@@ -0,0 +1,218 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const props_1 = require("@styled-system/props");
+const focusZone_1 = require("./behaviors/focusZone");
+const useCombinedRefs_1 = require("./hooks/useCombinedRefs");
+const useFocusZone_1 = require("./hooks/useFocusZone");
+const Token_1 = __importDefault(require("./Token/Token"));
+const hooks_1 = require("./hooks");
+const _UnstyledTextInput_1 = __importDefault(require("./_UnstyledTextInput"));
+const _TextInputWrapper_1 = __importDefault(require("./_TextInputWrapper"));
+const Box_1 = __importDefault(require("./Box"));
+const Text_1 = __importDefault(require("./Text"));
+const iterateFocusableElements_1 = require("./utils/iterateFocusableElements");
+const overflowCountFontSizeMap = {
+    small: 0,
+    medium: 1,
+    large: 1,
+    extralarge: 2
+};
+// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
+function TextInputWithTokensInnerComponent({ icon: IconComponent, contrast, className, block, disabled, theme, sx: sxProp, tokens, onTokenRemove, tokenComponent: TokenComponent, preventTokenWrapping, size, hideTokenRemoveButtons, maxHeight, width: widthProp, minWidth: minWidthProp, maxWidth: maxWidthProp, variant: variantProp, visibleTokenCount, ...rest }, externalRef) {
+    const { onBlur, onFocus, onKeyDown, ...inputPropsRest } = props_1.omit(rest);
+    const ref = hooks_1.useProvidedRefOrCreate(externalRef);
+    const localInputRef = react_1.useRef(null);
+    const combinedInputRef = useCombinedRefs_1.useCombinedRefs(localInputRef, ref);
+    const [selectedTokenIndex, setSelectedTokenIndex] = react_1.useState();
+    const [tokensAreTruncated, setTokensAreTruncated] = react_1.useState(Boolean(visibleTokenCount));
+    const { containerRef } = useFocusZone_1.useFocusZone({
+        focusOutBehavior: 'wrap',
+        bindKeys: focusZone_1.FocusKeys.ArrowHorizontal | focusZone_1.FocusKeys.HomeAndEnd,
+        focusableElementFilter: element => {
+            return !element.getAttributeNames().includes('aria-hidden');
+        },
+        getNextFocusable: direction => {
+            if (!selectedTokenIndex && selectedTokenIndex !== 0) {
+                return undefined;
+            }
+            let nextIndex = selectedTokenIndex + 1; // "+ 1" accounts for the first element: the text input
+            if (direction === 'next') {
+                nextIndex += 1;
+            }
+            if (direction === 'previous') {
+                nextIndex -= 1;
+            }
+            if (nextIndex > tokens.length || nextIndex < 1) {
+                return combinedInputRef.current || undefined;
+            }
+            return containerRef.current?.children[nextIndex];
+        }
+    }, [selectedTokenIndex]);
+    const handleTokenRemove = (tokenId) => {
+        onTokenRemove(tokenId);
+        // HACK: wait a tick for the the token node to be removed from the DOM
+        setTimeout(() => {
+            const nextElementToFocus = containerRef.current?.children[selectedTokenIndex || 0];
+            // when removing the first token by keying "Backspace" or "Delete",
+            // `nextFocusableElement` is the div that wraps the input
+            const firstFocusable = nextElementToFocus && iterateFocusableElements_1.isFocusable(nextElementToFocus)
+                ? nextElementToFocus
+                : Array.from(containerRef.current?.children || []).find(el => iterateFocusableElements_1.isFocusable(el));
+            if (firstFocusable) {
+                firstFocusable.focus();
+            }
+            else {
+                // if there are no tokens left, focus the input
+                ref.current?.focus();
+            }
+        }, 0);
+    };
+    const handleTokenFocus = tokenIndex => () => {
+        setSelectedTokenIndex(tokenIndex);
+    };
+    const handleTokenBlur = () => {
+        setSelectedTokenIndex(undefined);
+        // HACK: wait a tick and check the focused element before hiding truncated tokens
+        // this prevents the tokens from hiding when the user is moving focus between tokens,
+        // but still hides the tokens when the user blurs the token by tabbing out or clicking somewhere else on the page
+        setTimeout(() => {
+            if (!containerRef.current?.contains(document.activeElement) && visibleTokenCount) {
+                setTokensAreTruncated(true);
+            }
+        }, 0);
+    };
+    const handleTokenKeyUp = event => {
+        if (event.key === 'Escape') {
+            ref.current?.focus();
+        }
+    };
+    const handleInputFocus = event => {
+        onFocus && onFocus(event);
+        setSelectedTokenIndex(undefined);
+        visibleTokenCount && setTokensAreTruncated(false);
+    };
+    const handleInputBlur = event => {
+        onBlur && onBlur(event);
+        // HACK: wait a tick and check the focused element before hiding truncated tokens
+        // this prevents the tokens from hiding when the user is moving focus from the input to a token,
+        // but still hides the tokens when the user blurs the input by tabbing out or clicking somewhere else on the page
+        setTimeout(() => {
+            if (!containerRef.current?.contains(document.activeElement) && visibleTokenCount) {
+                setTokensAreTruncated(true);
+            }
+        }, 0);
+    };
+    const handleInputKeyDown = e => {
+        if (onKeyDown) {
+            onKeyDown(e);
+        }
+        if (ref.current?.value) {
+            return;
+        }
+        const lastToken = tokens[tokens.length - 1];
+        if (e.key === 'Backspace' && lastToken) {
+            handleTokenRemove(lastToken.id);
+            if (ref.current) {
+                // TODO: eliminate the first hack by making changes to the Autocomplete component
+                //
+                // HACKS:
+                // 1. Directly setting `ref.current.value` instead of updating state because the autocomplete
+                //    highlight behavior doesn't work correctly if we update the value with a setState action in onChange
+                // 2. Adding an extra space so that when I backspace, it doesn't delete the last letter
+                ref.current.value = `${lastToken.text} `;
+            }
+            // HACK: for some reason we need to wait a tick for `.select()` to work
+            setTimeout(() => {
+                ref.current?.select();
+            }, 0);
+        }
+    };
+    const focusInput = () => {
+        combinedInputRef.current?.focus();
+    };
+    const preventTokenClickPropagation = event => {
+        event.stopPropagation();
+    };
+    const visibleTokens = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens;
+    return (<_TextInputWrapper_1.default block={block} className={className} contrast={contrast} disabled={disabled} hasIcon={!!IconComponent} theme={theme} width={widthProp} minWidth={minWidthProp} maxWidth={maxWidthProp} variant={variantProp} onClick={focusInput} sx={{
+            ...(block
+                ? {
+                    display: 'flex',
+                    width: '100%'
+                }
+                : {}),
+            ...(maxHeight
+                ? {
+                    maxHeight,
+                    overflow: 'auto'
+                }
+                : {}),
+            ...(preventTokenWrapping
+                ? {
+                    overflow: 'auto'
+                }
+                : {}),
+            ...sxProp
+        }}>
+      <Box_1.default ref={containerRef} display="flex" sx={{
+            alignItems: 'center',
+            flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
+            marginLeft: '-0.25rem',
+            marginBottom: '-0.25rem',
+            flexGrow: 1,
+            '> *': {
+                flexShrink: 0,
+                marginLeft: '0.25rem',
+                marginBottom: '0.25rem'
+            }
+        }}>
+        <Box_1.default sx={{
+            order: 1,
+            flexGrow: 1
+        }}>
+          {IconComponent && <IconComponent className="TextInput-icon"/>}
+          <_UnstyledTextInput_1.default ref={combinedInputRef} disabled={disabled} onFocus={handleInputFocus} onBlur={handleInputBlur} onKeyDown={handleInputKeyDown} type="text" sx={{ height: '100%' }} {...inputPropsRest}/>
+        </Box_1.default>
+        {TokenComponent
+            ? visibleTokens.map(({ id, ...tokenRest }, i) => (<TokenComponent key={id} onFocus={handleTokenFocus(i)} onBlur={handleTokenBlur} onKeyUp={handleTokenKeyUp} onClick={preventTokenClickPropagation} isSelected={selectedTokenIndex === i} onRemove={() => {
+                    handleTokenRemove(id);
+                }} hideRemoveButton={hideTokenRemoveButtons} size={size} tabIndex={0} {...tokenRest}/>))
+            : null}
+        {tokensAreTruncated ? (<Text_1.default color="fg.muted" fontSize={size && overflowCountFontSizeMap[size]}>
+            +{tokens.length - visibleTokens.length}
+          </Text_1.default>) : null}
+      </Box_1.default>
+    </_TextInputWrapper_1.default>);
+}
+const TextInputWithTokens = react_1.default.forwardRef(TextInputWithTokensInnerComponent);
+TextInputWithTokens.defaultProps = {
+    tokenComponent: Token_1.default,
+    size: 'extralarge',
+    hideTokenRemoveButtons: false,
+    preventTokenWrapping: false
+};
+TextInputWithTokens.displayName = 'TextInputWithTokens';
+exports.default = TextInputWithTokens;

package/lib/ThemeProvider.jsx

@@ -0,0 +1,130 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColorSchemeVar = exports.useTheme = exports.ThemeProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = require("styled-components");
+const theme_1 = __importDefault(require("./theme"));
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultColorMode = 'day';
+const defaultDayScheme = 'light';
+const defaultNightScheme = 'dark';
+const ThemeContext = react_1.default.createContext({
+    setColorMode: () => null,
+    setDayScheme: () => null,
+    setNightScheme: () => null
+});
+const ThemeProvider = ({ children, ...props }) => {
+    // Get fallback values from parent ThemeProvider (if exists)
+    const { theme: fallbackTheme, colorMode: fallbackColorMode, dayScheme: fallbackDayScheme, nightScheme: fallbackNightScheme } = useTheme();
+    // Initialize state
+    const theme = props.theme ?? fallbackTheme ?? theme_1.default;
+    const [colorMode, setColorMode] = react_1.default.useState(props.colorMode ?? fallbackColorMode ?? defaultColorMode);
+    const [dayScheme, setDayScheme] = react_1.default.useState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme);
+    const [nightScheme, setNightScheme] = react_1.default.useState(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme);
+    const systemColorMode = useSystemColorMode();
+    const resolvedColorMode = resolveColorMode(colorMode, systemColorMode);
+    const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
+    const resolvedTheme = react_1.default.useMemo(() => applyColorScheme(theme, colorScheme), [theme, colorScheme]);
+    // Update state if props change
+    react_1.default.useEffect(() => {
+        setColorMode(props.colorMode ?? fallbackColorMode ?? defaultColorMode);
+    }, [props.colorMode, fallbackColorMode]);
+    react_1.default.useEffect(() => {
+        setDayScheme(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme);
+    }, [props.dayScheme, fallbackDayScheme]);
+    react_1.default.useEffect(() => {
+        setNightScheme(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme);
+    }, [props.nightScheme, fallbackNightScheme]);
+    return (<ThemeContext.Provider value={{
+            theme: resolvedTheme,
+            colorScheme,
+            colorMode,
+            resolvedColorMode,
+            dayScheme,
+            nightScheme,
+            setColorMode,
+            setDayScheme,
+            setNightScheme
+        }}>
+      <styled_components_1.ThemeProvider theme={resolvedTheme}>{children}</styled_components_1.ThemeProvider>
+    </ThemeContext.Provider>);
+};
+exports.ThemeProvider = ThemeProvider;
+function useTheme() {
+    return react_1.default.useContext(ThemeContext);
+}
+exports.useTheme = useTheme;
+function useColorSchemeVar(values, fallback) {
+    const { colorScheme = '' } = useTheme();
+    return values[colorScheme] ?? fallback;
+}
+exports.useColorSchemeVar = useColorSchemeVar;
+function useSystemColorMode() {
+    const [systemColorMode, setSystemColorMode] = react_1.default.useState(getSystemColorMode);
+    react_1.default.useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const media = window?.matchMedia?.('(prefers-color-scheme: dark)');
+        function handleChange(event) {
+            const isNight = event.matches;
+            setSystemColorMode(isNight ? 'night' : 'day');
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (media) {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if (media.addEventListener !== undefined) {
+                media.addEventListener('change', handleChange);
+                return function cleanup() {
+                    media.removeEventListener('change', handleChange);
+                };
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            else if (media.addListener !== undefined) {
+                media.addListener(handleChange);
+                return function cleanup() {
+                    media.removeListener(handleChange);
+                };
+            }
+        }
+    }, []);
+    return systemColorMode;
+}
+function getSystemColorMode() {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)')?.matches) {
+        return 'night';
+    }
+    return 'day';
+}
+function resolveColorMode(colorMode, systemColorMode) {
+    switch (colorMode) {
+        case 'auto':
+            return systemColorMode;
+        default:
+            return colorMode;
+    }
+}
+function chooseColorScheme(colorMode, dayScheme, nightScheme) {
+    switch (colorMode) {
+        case 'day':
+            return dayScheme;
+        case 'night':
+            return nightScheme;
+    }
+}
+function applyColorScheme(theme, colorScheme) {
+    if (!theme.colorSchemes) {
+        return theme;
+    }
+    if (!theme.colorSchemes[colorScheme]) {
+        // eslint-disable-next-line no-console
+        console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``);
+        // Apply the first defined color scheme
+        const defaultColorScheme = Object.keys(theme.colorSchemes)[0];
+        return deepmerge_1.default(theme, theme.colorSchemes[defaultColorScheme]);
+    }
+    return deepmerge_1.default(theme, theme.colorSchemes[colorScheme]);
+}
+exports.default = exports.ThemeProvider;

package/lib/Timeline.d.ts

@@ -124,6 +124,27 @@ declare const _default: string & import("styled-components").StyledComponentBase
             slot?: string | undefined;
             style?: React.CSSProperties | undefined;
             title?: string | 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;
+            size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+            sx?: import("./sx").BetterSystemStyleObject | undefined;
+            role?: React.AriaRole | undefined;
             key?: React.Key | null | undefined;
             defaultChecked?: boolean | undefined;
             defaultValue?: string | number | readonly string[] | undefined;
@@ -131,17 +152,16 @@ declare const _default: string & import("styled-components").StyledComponentBase
             suppressHydrationWarning?: boolean | undefined;
             accessKey?: string | undefined;
             className?: string | undefined;
-            contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+            contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
             contextMenu?: string | undefined;
             dir?: string | undefined;
-            draggable?: (boolean | "true" | "false") | undefined;
+            draggable?: (boolean | "false" | "true") | undefined;
             id?: string | undefined;
             lang?: string | undefined;
             placeholder?: string | undefined;
-            spellCheck?: (boolean | "true" | "false") | undefined;
+            spellCheck?: (boolean | "false" | "true") | undefined;
             tabIndex?: number | undefined;
             radioGroup?: string | undefined;
-            role?: React.AriaRole | undefined;
             about?: string | undefined;
             datatype?: string | undefined;
             inlist?: any;
@@ -164,47 +184,47 @@ declare const _default: string & import("styled-components").StyledComponentBase
             inputMode?: "search" | "none" | "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-busy'?: boolean | "true" | "false" | undefined;
-            'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+            'aria-atomic'?: boolean | "false" | "true" | undefined;
+            'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+            'aria-busy'?: boolean | "false" | "true" | undefined;
+            'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
             'aria-colcount'?: number | undefined;
             'aria-colindex'?: number | undefined;
             'aria-colspan'?: number | undefined;
             'aria-controls'?: string | undefined;
-            'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+            'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
             'aria-describedby'?: string | undefined;
             'aria-details'?: string | undefined;
-            'aria-disabled'?: boolean | "true" | "false" | undefined;
-            'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+            'aria-disabled'?: boolean | "false" | "true" | undefined;
+            'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
             'aria-errormessage'?: string | undefined;
-            'aria-expanded'?: boolean | "true" | "false" | undefined;
+            'aria-expanded'?: boolean | "false" | "true" | undefined;
             'aria-flowto'?: string | undefined;
-            'aria-grabbed'?: boolean | "true" | "false" | undefined;
-            'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
-            'aria-hidden'?: boolean | "true" | "false" | undefined;
-            'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+            'aria-grabbed'?: boolean | "false" | "true" | undefined;
+            'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+            'aria-hidden'?: boolean | "false" | "true" | undefined;
+            'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
             'aria-keyshortcuts'?: string | undefined;
             'aria-label'?: string | undefined;
             'aria-labelledby'?: string | undefined;
             'aria-level'?: number | undefined;
             'aria-live'?: "off" | "assertive" | "polite" | undefined;
-            'aria-modal'?: boolean | "true" | "false" | undefined;
-            'aria-multiline'?: boolean | "true" | "false" | undefined;
-            'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+            'aria-modal'?: boolean | "false" | "true" | undefined;
+            'aria-multiline'?: boolean | "false" | "true" | undefined;
+            'aria-multiselectable'?: boolean | "false" | "true" | undefined;
             'aria-orientation'?: "horizontal" | "vertical" | undefined;
             'aria-owns'?: string | undefined;
             'aria-placeholder'?: string | undefined;
             'aria-posinset'?: number | undefined;
-            'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-            'aria-readonly'?: boolean | "true" | "false" | undefined;
+            'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+            'aria-readonly'?: boolean | "false" | "true" | undefined;
             'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-            'aria-required'?: boolean | "true" | "false" | undefined;
+            'aria-required'?: boolean | "false" | "true" | undefined;
             'aria-roledescription'?: string | undefined;
             'aria-rowcount'?: number | undefined;
             'aria-rowindex'?: number | undefined;
             'aria-rowspan'?: number | undefined;
-            'aria-selected'?: boolean | "true" | "false" | undefined;
+            'aria-selected'?: boolean | "false" | "true" | undefined;
             'aria-setsize'?: number | undefined;
             'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
             'aria-valuemax'?: number | undefined;
@@ -374,28 +394,8 @@ declare const _default: string & import("styled-components").StyledComponentBase
             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;
-            size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<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("./sx").BetterSystemStyleObject | undefined;
         } & {
             theme?: any;
         }): JSX.Element;