Fix nits

Author: OEvgeny

packages/component/src/Icon/ComponentIcon.tsx

@@ -1,17 +1,17 @@
 import { validateProps } from 'botframework-webchat-react-valibot';
 import { useStyles } from 'botframework-webchat-styles/react';
 import cx from 'classnames';
-import React from 'react';
+import React, { memo } from 'react';
 import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import createIconComponent from '../Utils/createIconComponent';
 import styles from './ComponentIcon.module.css';
 
 const componentIconPropsSchema = pipe(
   object({
+    appearance: optional(string()),
     className: optional(string()),
     icon: optional(string()),
-    appearance: optional(string()),
     size: optional(string())
   }),
   readonly()
@@ -31,5 +31,5 @@ const ComponentIcon = createIconComponent(styles, BaseComponentIcon);
 
 ComponentIcon.displayName = 'ComponentIcon';
 
-export default ComponentIcon;
-export type { ComponentIconProps };
+export default memo(ComponentIcon);
+export { componentIconPropsSchema, type ComponentIconProps };  

packages/component/src/SendBox/AttachmentBar/AttachmentBar.module.css

@@ -12,7 +12,7 @@
     overflow-x: auto;
   }
 
-  .send-box-attachment-bar--box {
+  .send-box-attachment-bar__box {
     gap: 4px;
   }
 

packages/component/src/SendBox/AttachmentBar/AttachmentBar.tsx

@@ -56,7 +56,7 @@ function SendBoxAttachmentBar(props: SendBoxAttachmentBarProps) {
         )}
         data-testid={testIds.sendBoxAttachmentBar}
       >
-        <div className={classNames['send-box-attachment-bar--box']}>
+        <div className={classNames['send-box-attachment-bar__box']}>
           {sendBoxAttachments.map((attachment, index) => (
             // eslint-disable-next-line react/no-array-index-key
             <AttachmentBarItem attachment={attachment} key={index} mode={mode} onDelete={handleAttachmentDelete} />

packages/component/src/SendBox/AttachmentBar/ItemDeleteButton.tsx

@@ -1,7 +1,6 @@
 import { hooks } from 'botframework-webchat-api';
 import { validateProps } from 'botframework-webchat-react-valibot';
 import { useStyles } from 'botframework-webchat-styles/react';
-import cx from 'classnames';
 import React, { KeyboardEventHandler, useCallback } from 'react';
 import { function_, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
@@ -25,7 +24,6 @@ type AttachmentDeleteButtonProps = InferInput<typeof attachmentDeleteButtonProps
 function AttachmentDeleteButton(props: AttachmentDeleteButtonProps) {
   const { attachmentName, onClick } = validateProps(attachmentDeleteButtonPropsSchema, props);
   const classNames = useStyles(styles);
-
   const focus = useFocus();
   const localize = useLocalizer();
 
@@ -43,7 +41,7 @@ function AttachmentDeleteButton(props: AttachmentDeleteButtonProps) {
   return (
     <button
       aria-label={localize('SEND_BOX_ATTACHMENT_BAR_DELETE_BUTTON_ALT', attachmentName)}
-      className={cx(classNames['send-box-attachment-bar-item__delete-button'])}
+      className={classNames['send-box-attachment-bar-item__delete-button']}
       data-testid={testIds.sendBoxAttachmentBarItemDeleteButton}
       onClick={onClick}
       onKeyDown={handleKeyDown}

packages/component/src/SendBox/AttachmentBar/Preview/ImagePreview.tsx

@@ -1,6 +1,5 @@
 import { validateProps } from 'botframework-webchat-react-valibot';
 import { useStyles } from 'botframework-webchat-styles/react';
-import cx from 'classnames';
 import React, { memo } from 'react';
 import { object, picklist, pipe, readonly, string, type InferInput } from 'valibot';
 
@@ -34,7 +33,7 @@ function SendBoxAttachmentBarItemImageAttachmentPreview(props: SendBoxAttachment
   ) : (
     <img
       alt={attachmentName}
-      className={cx(classNames['send-box-attachment-bar-item-image-preview'])}
+      className={classNames['send-box-attachment-bar-item-image-preview']}
       src={attachment.thumbnailURL.href}
     />
   );

packages/component/src/Utils/createIconComponent.tsx

@@ -2,7 +2,7 @@ import { useStyles } from 'botframework-webchat-styles/react';
 import { validateProps } from 'botframework-webchat-react-valibot';
 import cx from 'classnames';
 import { object, optional, pipe, readonly, picklist } from 'valibot';
-import React from 'react';
+import React, { type ComponentType } from 'react';
 
 type CSSModule = {
   readonly [key: string | `${string}--${string}`]: any;
@@ -29,7 +29,7 @@ function createPropsSchema(styles: CSSModule) {
 
 export default function createIconComponent<T extends { className?: string | undefined }>(
   styles: CSSModule,
-  BaseIcon: React.ComponentType<T>
+  BaseIcon: ComponentType<T>
 ) {
   const propsSchema = createPropsSchema(styles);
   return (props => {