Fix Radio input UI regressions and remove dependency on styled-system (#19917)

* Fix "Admin > People" radio controls

* Fix "Admin > Permissions" tabs

* Fix metadata editor tabs

* Remove `py` from Radio

frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx

@@ -26,7 +26,7 @@ export default function PeopleListingApp({ children }) {
   } = usePeopleQuery(PAGE_SIZE);
 
   const headingContent = (
-    <div className="mb2 flex">
+    <div className="mb2 flex align-center">
       <SearchInput
         className="text-small mr2"
         type="text"
@@ -43,7 +43,6 @@ export default function PeopleListingApp({ children }) {
           { name: t`Deactivated`, value: USER_STATUS.deactivated },
         ]}
         showButtons
-        py={1}
         onChange={updateStatus}
       />
     </div>

frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsTabs.jsx

@@ -20,7 +20,6 @@ export const PermissionsTabs = ({ tab, onChangeTab }) => (
       ]}
       onOptionClick={onChangeTab}
       variant="underlined"
-      py={2}
     />
   </div>
 );

frontend/src/metabase/core/components/Radio/Radio.styled.tsx

 import styled from "styled-components";
-import { space, SpaceProps } from "styled-system";
 import { color, lighten } from "metabase/lib/colors";
 import { RadioColorScheme, RadioVariant } from "./types";
 
@@ -21,14 +20,13 @@ export const RadioGroupBubble = styled(RadioGroup)`
   display: flex;
 `;
 
-export interface RadioLabelProps extends SpaceProps {
+export interface RadioLabelProps {
   variant: RadioVariant;
   vertical: boolean;
 }
 
 export const RadioLabel = styled.label<RadioLabelProps>`
   display: block;
-  ${space};
 `;
 
 export const RadioLabelNormal = styled(RadioLabel)`

frontend/src/metabase/core/components/Radio/Radio.tsx

@@ -52,7 +52,6 @@ export interface RadioProps<TValue extends Key, TOption = RadioOption<TValue>>
   disabled?: boolean;
   vertical?: boolean;
   showButtons?: boolean;
-  py?: number;
   onChange?: (value: TValue) => void;
   onOptionClick?: (value: TValue) => void;
 }
@@ -78,7 +77,6 @@ const Radio = forwardRef(function Radio<
     disabled = false,
     vertical = false,
     showButtons = vertical && variant !== "bubble",
-    py,
     onChange,
     onOptionClick,
     ...props
@@ -114,7 +112,6 @@ const Radio = forwardRef(function Radio<
             disabled={disabled}
             vertical={vertical}
             showButtons={showButtons}
-            py={py}
             onChange={onChange}
             onOptionClick={onOptionClick}
           />
@@ -134,7 +131,6 @@ interface RadioItemProps<TValue extends Key> {
   disabled: boolean;
   vertical: boolean;
   showButtons: boolean;
-  py: number | undefined;
   onChange?: (value: TValue) => void;
   onOptionClick?: (value: TValue) => void;
 }
@@ -149,7 +145,6 @@ const RadioItem = <TValue extends Key, TOption>({
   disabled,
   vertical,
   showButtons,
-  py,
   onChange,
   onOptionClick,
 }: RadioItemProps<TValue>): JSX.Element => {
@@ -164,12 +159,7 @@ const RadioItem = <TValue extends Key, TOption>({
   }, [value, onOptionClick]);
 
   return (
-    <RadioLabel
-      variant={variant}
-      vertical={vertical}
-      py={py}
-      onClick={handleClick}
-    >
+    <RadioLabel variant={variant} vertical={vertical} onClick={handleClick}>
       <RadioInput
         type="radio"
         name={name}

frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/DatasetFieldMetadataSidebar.jsx

@@ -362,7 +362,6 @@ function DatasetFieldMetadataSidebar({
                     options={TAB_OPTIONS}
                     onChange={setTab}
                     variant="underlined"
-                    py={1}
                   />
                 </FormTabsContainer>
               )}