Make AxoSymbol.Icon center in non-inline parents

ts/axo/AxoBadge.dom.tsx

@@ -96,7 +96,7 @@ export namespace ExperimentalAxoBadge {
       }
       if (value === 'mention') {
         return (
-          <span aria-hidden className={tw('leading-none')}>
+          <span aria-hidden>
             <AxoSymbol.InlineGlyph symbol="at" label={null} />
           </span>
         );

ts/axo/AxoIconButton.dom.tsx

@@ -15,7 +15,7 @@ type GenericButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 
 export namespace AxoIconButton {
   const baseStyles = tw(
-    'relative rounded-full align-top leading-none select-none',
+    'relative rounded-full select-none',
     'outline-border-focused not-forced-colors:outline-0 not-forced-colors:focused:outline-[2.5px]',
     'forced-colors:border forced-colors:border-[ButtonBorder] forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText]',
     'forced-colors:disabled:text-[GrayText]',

ts/axo/AxoSymbol.dom.stories.tsx

@@ -52,7 +52,7 @@ const SymbolInfo = memo(function SymbolInfo(props: {
               <span className={tw('type-caption text-label-secondary')}>
                 {variant.title}
               </span>
-              <span className={tw('text-[20px] leading-none')}>
+              <span className={tw('text-[20px]')}>
                 <Direction.Provider dir={variant.dir}>
                   <AxoSymbol.InlineGlyph
                     symbol={props.symbolName}

ts/axo/AxoSymbol.dom.tsx

@@ -90,7 +90,7 @@ export namespace AxoSymbol {
   }>;
 
   const iconStyles = tw(
-    'inline-flex size-[1em] shrink-0 items-center justify-center align-middle'
+    'inline-flex size-[1em] shrink-0 items-center justify-center align-middle leading-none'
   );
 
   export const Icon: FC<IconProps> = memo(props => {

ts/components/PreferencesNotificationProfiles.dom.tsx

@@ -1593,7 +1593,7 @@ function EmojiOrMoon({
     return (
       <div
         className={tw(
-          'absolute start-1/2 top-1/2 -translate-1/2 leading-none text-color-label-primary'
+          'absolute start-1/2 top-1/2 -translate-1/2 text-color-label-primary'
         )}
         style={
           forceLightTheme
@@ -2073,9 +2073,7 @@ function TimePicker({
         }}
         value={formatTimeForInput(time)}
       >
-        <DateInput
-          className={tw('inline-flex min-w-[5em] items-center leading-none')}
-        >
+        <DateInput className={tw('inline-flex min-w-[5em] items-center')}>
           {segment => {
             // We don't need the space between the time and the am/pm
             if (segment.type === 'literal' && segment.text === ' ') {
@@ -2103,9 +2101,7 @@ function TimePicker({
         </DateInput>
         <button
           className={classNames(
-            tw(
-              'ms-3 p-0.5 leading-none outline-0 focus-visible:bg-fill-selected'
-            ),
+            tw('ms-3 p-0.5 outline-0 focus-visible:bg-fill-selected'),
             isDisabled ? tw('text-label-placeholder') : null
           )}
           type="button"