fix: <IconButton>でDOM Elementに不要な属性が渡されるのを防ぐ

packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot

@@ -844,11 +844,8 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
           </div>
         </div>
         <button
-          className="c11 c12 c13 sc-hiCibw c13"
-          height={32}
+          className="c11 c12 c13"
           onClick={[Function]}
-          size="S"
-          width={32}
         >
           <pixiv-icon
             name="24/Close"

packages/react/src/components/IconButton/__snapshots__/index.story.storyshot

@@ -104,10 +104,7 @@ exports[`Storyshots IconButton Default M 1`] = `
 >
   <button
     className="c0 c1"
-    height={40}
-    size="M"
     title="close"
-    width={40}
   >
     <pixiv-icon
       name="24/Close"
@@ -220,10 +217,7 @@ exports[`Storyshots IconButton Overlay M 1`] = `
 >
   <button
     className="c0 c1"
-    height={40}
-    size="M"
     title="close"
-    width={40}
   >
     <pixiv-icon
       name="24/Close"

packages/react/src/components/IconButton/index.tsx

@@ -22,7 +22,7 @@ const IconButton = forwardRef<ClickableElement, IconButtonProps>(
   ) {
     validateIconSize(size, icon)
     return (
-      <StyledIconButton {...rest} ref={ref} variant={variant} size={size}>
+      <StyledIconButton {...rest} ref={ref} $size={size} $variant={variant}>
         <pixiv-icon name={icon} />
       </StyledIconButton>
     )
@@ -31,61 +31,67 @@ const IconButton = forwardRef<ClickableElement, IconButtonProps>(
 
 export default IconButton
 
+type StyledIconButtonProps = Required<{
+  [key in keyof Pick<
+    StyledProps,
+    'size' | 'variant'
+  > as `$${key}`]: StyledProps[key]
+}>
+
 const StyledIconButton = styled(Clickable).attrs<
-  Required<StyledProps>,
+  StyledIconButtonProps,
   ReturnType<typeof styledProps>
->(styledProps)`
+>(styledProps)<StyledIconButtonProps>`
   user-select: none;
 
-  width: ${(p) => p.width}px;
-  height: ${(p) => p.height}px;
+  width: ${(p) => p.$width}px;
+  height: ${(p) => p.$height}px;
   display: flex;
   align-items: center;
   justify-content: center;
 
-  ${({ font, background }) =>
+  ${({ $font, $background }) =>
     theme((o) => [
-      o.font[font],
-      o.bg[background].hover.press,
+      o.font[$font],
+      o.bg[$background].hover.press,
       o.disabled,
       o.borderRadius('oval'),
       o.outline.default.focus,
     ])}
 `
 
-function styledProps(props: Required<StyledProps>) {
+function styledProps({ $size, $variant }: StyledIconButtonProps) {
   return {
-    ...props,
-    ...variantToProps(props.variant),
-    ...sizeToProps(props.size),
+    ...variantToProps($variant),
+    ...sizeToProps($size),
   }
 }
 
 function variantToProps(variant: Variant) {
   switch (variant) {
     case 'Default':
-      return { font: 'text3', background: 'transparent' } as const
+      return { $font: 'text3', $background: 'transparent' } as const
     case 'Overlay':
-      return { font: 'text5', background: 'surface4' } as const
+      return { $font: 'text5', $background: 'surface4' } as const
   }
 }
 
 function sizeToProps(size: Size) {
   switch (size) {
     case 'XS':
       return {
-        width: 20,
-        height: 20,
+        $width: 20,
+        $height: 20,
       }
     case 'S':
       return {
-        width: 32,
-        height: 32,
+        $width: 32,
+        $height: 32,
       }
     case 'M':
       return {
-        width: 40,
-        height: 40,
+        $width: 40,
+        $height: 40,
       }
   }
 }

packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot

@@ -1588,9 +1588,6 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
       >
         <button
           className="c11 c12"
-          height={20}
-          size="XS"
-          width={20}
         >
           <pixiv-icon
             name="16/Remove"