Refactor theming of ClearInputAdornment (#1731)

<details>
    <summary>CopyToClipboardButton</summary>


https://github.com/vivid-planet/comet/assets/71731085/431f432b-4ac0-42b4-8b4d-e2e005f8c9a9


</details>

<details>
    <summary>Themed CopyToClipboardButton</summary>


https://github.com/vivid-planet/comet/assets/71731085/c1d4b458-8670-4501-bb83-a519f558fffc


</details>

Co-authored-by: Stefanie Kaltenhauser <stefanie.kaltenhauser@vivid-planet.com>
Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>

packages/admin/admin/src/common/ClearInputAdornment.tsx

@@ -2,77 +2,103 @@ import { Clear } from "@comet/admin-icons";
 import {
     ButtonBase,
     ComponentsOverrides,
+    css,
     Grow,
     InputAdornment,
     InputAdornmentClassKey,
     InputAdornmentProps,
     selectClasses,
+    styled,
     Theme,
+    useThemeProps,
 } from "@mui/material";
-import { createStyles, WithStyles, withStyles } from "@mui/styles";
+import { ThemedComponentBaseProps } from "helpers/ThemedComponentBaseProps";
 import * as React from "react";
 
-export interface ClearInputAdornmentProps extends InputAdornmentProps {
+export interface ClearInputAdornmentProps
+    extends InputAdornmentProps,
+        ThemedComponentBaseProps<{
+            root: typeof InputAdornment;
+            buttonBase: typeof ButtonBase;
+        }> {
     icon?: React.ReactNode;
     onClick: () => void;
     hasClearableContent: boolean;
 }
 
-export const ClearAdornment = ({
-    classes,
-    icon = <Clear fontSize="inherit" />,
-    onClick,
-    hasClearableContent,
-    ...restProps
-}: WithStyles<typeof styles> & ClearInputAdornmentProps): React.ReactElement => {
-    const { buttonBase: buttonBaseClassName, ...restClasses } = classes;
+type OwnerState = Pick<ClearInputAdornmentProps, "position">;
+
+export type ClearInputAdornmentClassKey = InputAdornmentClassKey | "buttonBase";
+
+export const ClearInputAdornment = (inProps: ClearInputAdornmentProps): React.ReactElement => {
+    const {
+        hasClearableContent,
+        onClick,
+        position,
+        icon = <Clear fontSize="inherit" />,
+        slotProps,
+        ...restProps
+    } = useThemeProps({ props: inProps, name: "CometAdminClearInputAdornment" });
+
+    const ownerState: OwnerState = {
+        position,
+    };
+
     return (
         <Grow in={hasClearableContent}>
-            <InputAdornment {...restProps} classes={restClasses}>
-                <ButtonBase className={buttonBaseClassName} tabIndex={-1} onClick={onClick}>
+            <Root position={position} ownerState={ownerState} {...slotProps?.root} {...restProps}>
+                <Button tabIndex={-1} onClick={onClick} {...slotProps?.buttonBase}>
                     {icon}
-                </ButtonBase>
-            </InputAdornment>
+                </Button>
+            </Root>
         </Grow>
     );
 };
 
-export type ClearInputAdornmentClassKey = InputAdornmentClassKey | "buttonBase";
+const Root = styled(InputAdornment, {
+    name: "CometAdminClearInputAdornment",
+    slot: "root",
+    overridesResolver(_, styles) {
+        return [styles.root];
+    },
+})<{ ownerState: OwnerState }>(
+    ({ theme, ownerState }) => css`
+        ${ownerState.position === "start" &&
+        css`
+            &:last-child {
+                margin-left: ${theme.spacing(-2)};
+            }
+        `}
 
-const styles = ({ palette, spacing }: Theme) => {
-    return createStyles<ClearInputAdornmentClassKey, ClearInputAdornmentProps>({
-        root: {},
-        filled: {},
-        outlined: {},
-        standard: {},
-        positionStart: {
-            "&:last-child": {
-                marginLeft: spacing(-2),
-            },
-        },
-        positionEnd: {
-            "&:last-child": {
-                marginRight: spacing(-2),
-            },
-            [`.${selectClasses.select} ~ &:last-child`]: {
-                // Reset the margin when used inside a MuiSelect, as MuiSelect-icon is moved to the end of the input using `order` and is, therefore, the "real" last-child.
-                marginRight: 0,
-            },
-        },
-        disablePointerEvents: {},
-        hiddenLabel: {},
-        sizeSmall: {},
-        buttonBase: {
-            height: "100%",
-            color: palette.grey[200],
-            paddingLeft: 10,
-            paddingRight: 10,
-            fontSize: 12,
-        },
-    });
-};
+        ${ownerState.position === "end" &&
+        css`
+            &:last-child {
+                margin-right: ${theme.spacing(-2)};
+            }
+
+            .${selectClasses.select} ~ &:last-child {
+                // Reset the margin when used inside a MuiSelect, as MuiSelect-icon is moved to the end of the input using 'order' and is, therefore, the "real" last-child.
+                margin-right: 0;
+            }
+        `}
+    `,
+);
 
-export const ClearInputAdornment = withStyles(styles, { name: "CometAdminClearInputAdornment" })(ClearAdornment);
+const Button = styled(ButtonBase, {
+    name: "CometAdminClearInputAdornment",
+    slot: "buttonBase",
+    overridesResolver(_, styles) {
+        return [styles.buttonBase];
+    },
+})(
+    ({ theme }) => css`
+        padding-left: 10px;
+        padding-right: 10px;
+        height: 100%;
+        color: ${theme.palette.grey[200]};
+        font-size: 12px;
+    `,
+);
 
 declare module "@mui/material/styles" {
     interface ComponentNameToClassKey {