diff --git a/packages/smarthr-ui/src/components/AppNavi/AppNaviAnchor.tsx b/packages/smarthr-ui/src/components/AppNavi/AppNaviAnchor.tsx
index e4446881ef..f0292c9013 100644
--- a/packages/smarthr-ui/src/components/AppNavi/AppNaviAnchor.tsx
+++ b/packages/smarthr-ui/src/components/AppNavi/AppNaviAnchor.tsx
@@ -14,7 +14,7 @@ import { tv } from 'tailwind-variants'
 import { ElementRef, ElementRefProps } from '../../types'
 import { ComponentProps as IconProps } from '../Icon'
 
-import { appNaviItemStyle } from './style'
+import { itemClassNameGenerator } from './itemClassNameGenerator'
 
 type ElementProps<T extends ElementType> = Omit<
   ComponentPropsWithoutRef<T>,
@@ -37,7 +37,7 @@ type AppNaviAnchorComponent = <T extends ElementType = 'a'>(
 ) => ReturnType<FC>
 
 const classNameGenerator = tv({
-  extend: appNaviItemStyle,
+  extend: itemClassNameGenerator,
   slots: {
     wrapper: ['smarthr-ui-AppNavi-anchor', 'forced-colors:shr-underline'],
   },
diff --git a/packages/smarthr-ui/src/components/AppNavi/AppNaviButton.tsx b/packages/smarthr-ui/src/components/AppNavi/AppNaviButton.tsx
index 23c0114583..3a67d6e875 100644
--- a/packages/smarthr-ui/src/components/AppNavi/AppNaviButton.tsx
+++ b/packages/smarthr-ui/src/components/AppNavi/AppNaviButton.tsx
@@ -4,7 +4,7 @@ import { tv } from 'tailwind-variants'
 import { UnstyledButton } from '../Button'
 import { ComponentProps as IconProps } from '../Icon'
 
-import { appNaviItemStyle } from './style'
+import { itemClassNameGenerator } from './itemClassNameGenerator'
 
 export type AppNaviButtonProps = PropsWithChildren<{
   /** 表示するアイコンタイプ */
@@ -16,7 +16,7 @@ export type AppNaviButtonProps = PropsWithChildren<{
 }>
 
 const classNameGenerator = tv({
-  extend: appNaviItemStyle,
+  extend: itemClassNameGenerator,
   slots: {
     wrapper: 'smarthr-ui-AppNavi-button',
   },
diff --git a/packages/smarthr-ui/src/components/AppNavi/AppNaviCustomTag.tsx b/packages/smarthr-ui/src/components/AppNavi/AppNaviCustomTag.tsx
index 3967baf812..fdc286b1d9 100644
--- a/packages/smarthr-ui/src/components/AppNavi/AppNaviCustomTag.tsx
+++ b/packages/smarthr-ui/src/components/AppNavi/AppNaviCustomTag.tsx
@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants'
 
 import { ComponentProps as IconProps } from '../Icon'
 
-import { appNaviItemStyle } from './style'
+import { itemClassNameGenerator } from './itemClassNameGenerator'
 
 export type AppNaviCustomTagProps = PropsWithChildren<{
   /** このボタンのカスタムタグ */
@@ -15,7 +15,7 @@ export type AppNaviCustomTagProps = PropsWithChildren<{
 }> & { [key: string]: any }
 
 const classNameGenerator = tv({
-  extend: appNaviItemStyle,
+  extend: itemClassNameGenerator,
   slots: {
     wrapper: 'smarthr-ui-AppNavi-customTag',
   },
diff --git a/packages/smarthr-ui/src/components/AppNavi/AppNaviDropdown.tsx b/packages/smarthr-ui/src/components/AppNavi/AppNaviDropdown.tsx
index 65eecc7ab3..4d9e8940b0 100644
--- a/packages/smarthr-ui/src/components/AppNavi/AppNaviDropdown.tsx
+++ b/packages/smarthr-ui/src/components/AppNavi/AppNaviDropdown.tsx
@@ -5,7 +5,7 @@ import { UnstyledButton } from '../Button'
 import { Dropdown, DropdownContent, DropdownTrigger } from '../Dropdown'
 import { FaCaretDownIcon, ComponentProps as IconProps } from '../Icon'
 
-import { appNaviItemStyle } from './style'
+import { itemClassNameGenerator } from './itemClassNameGenerator'
 
 export type AppNaviDropdownProps = PropsWithChildren<{
   /** ドロップダウンのコンテンツ */
@@ -18,7 +18,7 @@ export type AppNaviDropdownProps = PropsWithChildren<{
 }>
 
 const classNameGenerator = tv({
-  extend: appNaviItemStyle,
+  extend: itemClassNameGenerator,
   variants: {
     displayCaret: {
       true: {
diff --git a/packages/smarthr-ui/src/components/AppNavi/style.ts b/packages/smarthr-ui/src/components/AppNavi/itemClassNameGenerator.ts
similarity index 94%
rename from packages/smarthr-ui/src/components/AppNavi/style.ts
rename to packages/smarthr-ui/src/components/AppNavi/itemClassNameGenerator.ts
index b3f039b1f7..0b2359de4f 100644
--- a/packages/smarthr-ui/src/components/AppNavi/style.ts
+++ b/packages/smarthr-ui/src/components/AppNavi/itemClassNameGenerator.ts
@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants'
 
-export const appNaviItemStyle = tv({
+export const itemClassNameGenerator = tv({
   slots: {
     wrapper: [
       'shr-box-border shr-inline-flex shr-cursor-pointer shr-items-center shr-gap-0.5 shr-whitespace-nowrap shr-px-0.5 shr-py-0.75 shr-text-base shr-font-bold shr-leading-none shr-no-underline shr-text-grey',
diff --git a/packages/smarthr-ui/src/components/BottomFixedArea/BottomFixedArea.tsx b/packages/smarthr-ui/src/components/BottomFixedArea/BottomFixedArea.tsx
index c6bc78238c..625316c0ac 100644
--- a/packages/smarthr-ui/src/components/BottomFixedArea/BottomFixedArea.tsx
+++ b/packages/smarthr-ui/src/components/BottomFixedArea/BottomFixedArea.tsx
@@ -1,13 +1,15 @@
 'use client'
 
 import React, {
-  ComponentProps,
-  ComponentPropsWithRef,
-  ComponentType,
-  FC,
-  FunctionComponentElement,
-  MouseEventHandler,
-  ReactNode,
+  type ComponentProps,
+  type ComponentPropsWithRef,
+  type ComponentType,
+  type FC,
+  type FunctionComponentElement,
+  type MouseEventHandler,
+  type PropsWithChildren,
+  type ReactNode,
+  memo,
   useEffect,
   useMemo,
 } from 'react'
@@ -15,16 +17,12 @@ import { tv } from 'tailwind-variants'
 
 import { Base } from '../Base'
 import { AnchorButton, Button } from '../Button'
-import { ComponentProps as IconProps } from '../Icon'
+import { type ComponentProps as IconProps } from '../Icon'
 import { Cluster, Stack } from '../Layout'
 
 import { validateElement } from './bottomFixedAreaHelper'
 
-export type Primary =
-  | FunctionComponentElement<ComponentProps<typeof Button>>
-  | FunctionComponentElement<ComponentProps<typeof AnchorButton>>
-
-export type Secondary =
+export type ButtonType =
   | FunctionComponentElement<ComponentProps<typeof Button>>
   | FunctionComponentElement<ComponentProps<typeof AnchorButton>>
 
@@ -34,9 +32,9 @@ type Props = {
   /** この領域の説明 */
   description?: ReactNode
   /** 表示する `Button` または `AnchorButton` （`variant="primary"` である必要がある） */
-  primaryButton?: Primary
+  primaryButton?: ButtonType
   /** 表示する `Button` または `AnchorButton` （`variant="secondary"` である必要がある）*/
-  secondaryButton?: Secondary
+  secondaryButton?: ButtonType
   /** 表示する tertialy link のプロパティの配列 */
   tertiaryLinks?: Array<
     ComponentPropsWithRef<'button'> & {
@@ -50,7 +48,7 @@ type Props = {
   zIndex?: number
 }
 
-const bottomFixedArea = tv({
+const classNameGenerator = tv({
   slots: {
     wrapper: [
       'smarthr-ui-BottomFixedArea',
@@ -78,22 +76,24 @@ export const BottomFixedArea: FC<Props & ElementProps> = ({
   className,
   ...props
 }) => {
-  const { wrapperStyleProps, tertiaryButtonStyle } = useMemo(() => {
-    const { wrapper, tertiaryButton } = bottomFixedArea()
+  const classNames = useMemo(() => {
+    const { wrapper, tertiaryButton } = classNameGenerator()
+
     return {
-      wrapperStyleProps: { className: wrapper({ className }), style: { zIndex } },
-      tertiaryButtonStyle: tertiaryButton(),
+      wrapper: wrapper({ className }),
+      tertiaryButton: tertiaryButton(),
     }
-  }, [className, zIndex])
+  }, [className])
+  const style = useMemo(() => ({ zIndex }), [zIndex])
 
   useEffect(() => {
     validateElement(primaryButton, secondaryButton)
   }, [primaryButton, secondaryButton])
 
   return (
-    <Base {...props} {...wrapperStyleProps}>
+    <Base {...props} className={classNames.wrapper} style={style}>
       <Stack>
-        {description && <p className="smarthr-ui-BottomFixedArea-description">{description}</p>}
+        <Description>{description}</Description>
         <Stack gap={0.25}>
           {(secondaryButton || primaryButton) && (
             <Cluster as="ul" justify="center" gap={{ row: 0.5, column: 1 }}>
@@ -107,14 +107,13 @@ export const BottomFixedArea: FC<Props & ElementProps> = ({
           )}
           {tertiaryLinks && tertiaryLinks.length > 0 && (
             <Cluster as="ul" justify="center" gap={{ row: 0.5, column: 0 }}>
-              {tertiaryLinks.map(({ text, icon: Icon, onClick, ...tertiaryProps }, index) => (
+              {tertiaryLinks.map(({ text, icon: Icon, ...tertiaryRest }, index) => (
                 <li key={index} className="smarthr-ui-BottomFixedArea-tertiaryListItem">
                   <Button
-                    {...tertiaryProps}
+                    {...tertiaryRest}
                     variant="text"
                     prefix={Icon && <Icon />}
-                    onClick={onClick}
-                    className={tertiaryButtonStyle}
+                    className={classNames.tertiaryButton}
                   >
                     {text}
                   </Button>
@@ -127,3 +126,8 @@ export const BottomFixedArea: FC<Props & ElementProps> = ({
     </Base>
   )
 }
+
+const Description = memo<PropsWithChildren>(
+  ({ children }) =>
+    children && <p className="smarthr-ui-BottomFixedArea-description">{children}</p>,
+)
diff --git a/packages/smarthr-ui/src/components/BottomFixedArea/bottomFixedAreaHelper.ts b/packages/smarthr-ui/src/components/BottomFixedArea/bottomFixedAreaHelper.ts
index ef1ebc6227..eca7fb8a36 100644
--- a/packages/smarthr-ui/src/components/BottomFixedArea/bottomFixedAreaHelper.ts
+++ b/packages/smarthr-ui/src/components/BottomFixedArea/bottomFixedAreaHelper.ts
@@ -1,6 +1,6 @@
-import { Primary, Secondary } from './BottomFixedArea'
+import { ButtonType } from './BottomFixedArea'
 
-export const validateElement = (primary?: Primary, secondary?: Secondary) => {
+export const validateElement = (primary?: ButtonType, secondary?: ButtonType) => {
   if (primary) {
     const { displayName } = primary.type
 
diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
index a3315f70f5..cfd68a14f9 100644
--- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
@@ -1,9 +1,12 @@
 'use client'
 
 import React, {
+  type ChangeEvent,
   type ComponentPropsWithoutRef,
   type KeyboardEvent,
+  type MouseEvent,
   type Ref,
+  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -77,12 +80,18 @@ type ElementProps = Omit<ComponentPropsWithoutRef<'input'>, keyof Props<unknown>
 const SELECTED_LIST_ARIA_LABEL = '選択済みアイテム'
 const NOOP = () => undefined
 
+const preventDefaultWithPressEnter = (e: KeyboardEvent<HTMLInputElement>) => {
+  if (e.key === 'Enter') {
+    e.preventDefault()
+  }
+}
+
 const ESCAPE_KEY_REGEX = /^Esc(ape)?$/
 const ARROW_LEFT_KEY_REGEX = /^(Arrow)?Left$/
 const ARROW_RIGHT_KEY_REGEX = /^(Arrow)?Right/
 const ARROW_UP_AND_DOWN_KEY_REGEX = /^(Arrow)?(Up|Down)$/
 
-const multiCombobox = tv({
+const classNameGenerator = tv({
   slots: {
     wrapper: [
       'smarthr-ui-MultiComboBox',
@@ -186,20 +195,33 @@ const ActualMultiComboBox = <T,>(
     isItemSelected,
   })
   const setInputValueIfUncontrolled = isInputControlled ? NOOP : setUncontrolledInputValue
-  const handleDelete = useCallback(
-    (item: ComboBoxItem<T>) => {
+  const actualOnDelete = useMemo(() => {
+    const handlers: Array<(item: ComboBoxItem<T>) => void> = []
+
+    if (onDelete) {
+      handlers.push((item: ComboBoxItem<T>) => onDelete(item))
+    }
+    if (onChangeSelected) {
+      handlers.push((item: ComboBoxItem<T>) =>
+        onChangeSelected(
+          selectedItems.filter((selected) => !areComboBoxItemsEqual(selected, item)),
+        ),
+      )
+    }
+
+    if (handlers.length === 0) {
+      return NOOP
+    }
+
+    return (item: ComboBoxItem<T>) => {
       // HINT: Dropdown系コンポーネント内でComboBoxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう
       // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
       requestAnimationFrame(() => {
-        onDelete?.(item)
-        onChangeSelected?.(
-          selectedItems.filter((selected) => !areComboBoxItemsEqual(selected, item)),
-        )
+        handlers.forEach((h) => h(item))
       })
-    },
-    [selectedItems, onChangeSelected, onDelete],
-  )
-  const handleSelect = useCallback(
+    }
+  }, [selectedItems, onChangeSelected, onDelete])
+  const actualOnSelect = useCallback(
     (selected: ComboBoxItem<T>) => {
       // HINT: Dropdown系コンポーネント内でComboBoxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう
       // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
@@ -212,25 +234,19 @@ const ActualMultiComboBox = <T,>(
           onSelect?.(selected)
           onChangeSelected?.(selectedItems.concat(selected))
         } else if (matchedSelectedItem.deletable !== false) {
-          handleDelete(selected)
+          actualOnDelete(selected)
         }
       })
     },
-    [selectedItems, handleDelete, onChangeSelected, onSelect],
+    [selectedItems, actualOnDelete, onChangeSelected, onSelect],
   )
 
-  const {
-    renderListBox,
-    activeOption,
-    handleKeyDown: handleListBoxKeyDown,
-    listBoxId,
-    listBoxRef,
-  } = useListBox({
+  const { renderListBox, activeOption, onKeyDownListBox, listBoxId, listBoxRef } = useListBox({
     options,
     dropdownHelpMessage,
     dropdownWidth,
     onAdd,
-    onSelect: handleSelect,
+    onSelect: actualOnSelect,
     isExpanded: isFocused,
     isLoading,
     triggerRef: outerRef,
@@ -247,16 +263,38 @@ const ActualMultiComboBox = <T,>(
 
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => inputRef.current)
 
-  const focus = useCallback(() => {
-    onFocus?.()
-    setIsFocused(true)
+  const focus = useMemo(() => {
+    const baseAction = () => {
+      setIsFocused(true)
+    }
+
+    if (onFocus) {
+      return () => {
+        onFocus()
+        baseAction()
+      }
+    }
+
+    return baseAction
   }, [onFocus])
-  const blur = useCallback(() => {
-    if (!isFocused) return
+  const blur = useMemo(() => {
+    if (!isFocused) {
+      return NOOP
+    }
 
-    onBlur?.()
-    setIsFocused(false)
-    resetDeletionButtonFocus()
+    const baseAction = () => {
+      setIsFocused(false)
+      resetDeletionButtonFocus()
+    }
+
+    if (onBlur) {
+      return () => {
+        onBlur()
+        baseAction()
+      }
+    }
+
+    return baseAction
   }, [isFocused, onBlur, resetDeletionButtonFocus])
 
   useOuterClick([outerRef, listBoxRef], blur)
@@ -277,97 +315,104 @@ const ActualMultiComboBox = <T,>(
     }
   }, [inputRef, isFocused, setInputValueIfUncontrolled, selectedItems])
 
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLDivElement>) => {
-      if (isComposing) {
-        return
-      }
-
-      if (ESCAPE_KEY_REGEX.test(e.key)) {
-        e.stopPropagation()
-        blur()
-      } else if (e.key === 'Tab') {
-        if (isFocused) {
-          // フォーカスがコンポーネントを抜けるように先に input をフォーカスしておく
-          inputRef.current?.focus()
-        }
-
-        blur()
-      } else if (ARROW_LEFT_KEY_REGEX.test(e.key)) {
-        e.stopPropagation()
-        focusPrevDeletionButton()
-      } else if (ARROW_RIGHT_KEY_REGEX.test(e.key)) {
-        e.stopPropagation()
-        focusNextDeletionButton()
-      } else if (
-        e.key === 'Backspace' &&
-        !inputValue &&
-        selectedItems.length > 0 &&
-        selectedItems[selectedItems.length - 1].deletable !== false
-      ) {
-        e.preventDefault()
-        e.stopPropagation()
-
-        const lastItem = selectedItems[selectedItems.length - 1]
-
-        handleDelete(lastItem)
-        setHighlighted(true)
-        setInputValueIfUncontrolled(innerText(lastItem.label))
-      } else {
-        e.stopPropagation()
-        inputRef.current?.focus()
-        resetDeletionButtonFocus()
-      }
-
-      handleListBoxKeyDown(e)
-    },
+  const onKeyDown = useMemo(
+    () =>
+      isComposing
+        ? undefined
+        : (e: KeyboardEvent<HTMLDivElement>) => {
+            if (ESCAPE_KEY_REGEX.test(e.key)) {
+              e.stopPropagation()
+              blur()
+            } else if (e.key === 'Tab') {
+              if (isFocused) {
+                // フォーカスがコンポーネントを抜けるように先に input をフォーカスしておく
+                inputRef.current?.focus()
+              }
+
+              blur()
+            } else if (ARROW_LEFT_KEY_REGEX.test(e.key)) {
+              e.stopPropagation()
+              focusPrevDeletionButton()
+            } else if (ARROW_RIGHT_KEY_REGEX.test(e.key)) {
+              e.stopPropagation()
+              focusNextDeletionButton()
+            } else if (
+              e.key === 'Backspace' &&
+              !inputValue &&
+              selectedItems.length > 0 &&
+              selectedItems[selectedItems.length - 1].deletable !== false
+            ) {
+              e.preventDefault()
+              e.stopPropagation()
+
+              const lastItem = selectedItems[selectedItems.length - 1]
+
+              actualOnDelete(lastItem)
+              setHighlighted(true)
+              setInputValueIfUncontrolled(innerText(lastItem.label))
+            } else {
+              e.stopPropagation()
+              inputRef.current?.focus()
+              resetDeletionButtonFocus()
+            }
+
+            onKeyDownListBox(e)
+          },
     [
       blur,
       focusNextDeletionButton,
       focusPrevDeletionButton,
-      handleListBoxKeyDown,
+      onKeyDownListBox,
       inputRef,
       isComposing,
       isFocused,
       resetDeletionButtonFocus,
-      handleDelete,
+      actualOnDelete,
       inputValue,
       selectedItems,
       setInputValueIfUncontrolled,
     ],
   )
 
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLElement>) => {
-      if (
-        !disabled &&
-        !isFocused &&
-        !(e.target as HTMLElement).closest('.smarthr-ui-MultiComboBox-deleteButton')
-      ) {
-        focus()
-      }
-    },
+  const onClick = useMemo(
+    () =>
+      disabled || isFocused
+        ? undefined
+        : (e: MouseEvent<HTMLElement>) => {
+            if (!(e.target as HTMLElement).closest('.smarthr-ui-MultiComboBox-deleteButton')) {
+              focus()
+            }
+          },
     [isFocused, disabled, focus],
   )
-  const handleChangeInput = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      onChange?.(e)
-      onChangeInput?.(e)
-
+  const actualOnChangeInput = useMemo(() => {
+    const handlers = [onChange, onChangeInput].filter((h) => !!h)
+    const onSetValue = (e: ChangeEvent<HTMLInputElement>) => {
       setInputValueIfUncontrolled(e.currentTarget.value)
-    },
-    [onChange, onChangeInput, setInputValueIfUncontrolled],
-  )
-  const handleFocusInput = useCallback(() => {
-    resetDeletionButtonFocus()
+    }
 
-    if (!isFocused) {
-      focus()
+    if (handlers.length === 0) {
+      return onSetValue
+    }
+
+    return (e: ChangeEvent<HTMLInputElement>) => {
+      handlers.forEach((h) => h(e))
+      onSetValue(e)
     }
-  }, [isFocused, focus, resetDeletionButtonFocus])
-  const handleCompositionStartInput = useCallback(() => setIsComposing(true), [])
-  const handleCompositionEndInput = useCallback(() => setIsComposing(false), [])
-  const handleInputKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+  }, [onChange, onChangeInput, setInputValueIfUncontrolled])
+  const onFocusInput = useMemo(
+    () =>
+      isFocused
+        ? resetDeletionButtonFocus
+        : () => {
+            resetDeletionButtonFocus()
+            focus()
+          },
+    [isFocused, focus, resetDeletionButtonFocus],
+  )
+  const onCompositionStartInput = useCallback(() => setIsComposing(true), [])
+  const onCompositionEndInput = useCallback(() => setIsComposing(false), [])
+  const onKeyDownInput = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
     if (ARROW_UP_AND_DOWN_KEY_REGEX.test(e.key)) {
       // 上下キー入力はリストボックスの activeDescendant の移動に用いるため、input 内では作用させない
       e.preventDefault()
@@ -377,11 +422,14 @@ const ActualMultiComboBox = <T,>(
   // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で
   // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、
   // submitイベントが発生し、formが送信される場合がある
-  const handleKeyPress = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') e.preventDefault()
-      onKeyPress?.(e)
-    },
+  const actualOnKeyPress = useMemo(
+    () =>
+      onKeyPress
+        ? (e: KeyboardEvent<HTMLInputElement>) => {
+            preventDefaultWithPressEnter(e)
+            onKeyPress(e)
+          }
+        : preventDefaultWithPressEnter,
     [onKeyPress],
   )
 
@@ -404,7 +452,7 @@ const ActualMultiComboBox = <T,>(
       placeholderEl,
       suffixWrapper,
       suffixIcon,
-    } = multiCombobox()
+    } = classNameGenerator()
 
     return {
       wrapper: wrapper({ focused: isFocused, disabled, className }),
@@ -428,9 +476,9 @@ const ActualMultiComboBox = <T,>(
     <div
       ref={outerRef}
       role="group"
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      onKeyPress={handleKeyPress}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      onKeyPress={actualOnKeyPress}
       className={classNames.wrapper}
       style={wrapperStyle}
     >
@@ -441,7 +489,7 @@ const ActualMultiComboBox = <T,>(
               <MultiSelectedItem
                 item={selectedItem}
                 disabled={disabled}
-                onDelete={handleDelete}
+                onDelete={actualOnDelete}
                 enableEllipsis={selectedItemEllipsis}
                 buttonRef={deletionButtonRefs[i]}
                 decorators={decorators}
@@ -460,11 +508,11 @@ const ActualMultiComboBox = <T,>(
             disabled={disabled}
             required={required && selectedItems.length === 0}
             ref={inputRef}
-            onChange={handleChangeInput}
-            onFocus={handleFocusInput}
-            onCompositionStart={handleCompositionStartInput}
-            onCompositionEnd={handleCompositionEndInput}
-            onKeyDown={handleInputKeyDown}
+            onChange={actualOnChangeInput}
+            onFocus={onFocusInput}
+            onCompositionStart={onCompositionStartInput}
+            onCompositionEnd={onCompositionEndInput}
+            onKeyDown={onKeyDownInput}
             autoComplete={autoComplete ?? 'off'}
             tabIndex={0}
             role="combobox"
@@ -498,7 +546,7 @@ const ActualMultiComboBox = <T,>(
 
 export const MultiComboBox = genericsForwardRef(ActualMultiComboBox)
 
-const MemoizedCaretDown = React.memo<{
+const MemoizedCaretDown = memo<{
   className: string
   iconStyle: string
   disabled: boolean
diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiSelectedItem.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiSelectedItem.tsx
index 968aa4e66e..0b2f5e9587 100644
--- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiSelectedItem.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiSelectedItem.tsx
@@ -1,6 +1,8 @@
 import React, {
-  PropsWithChildren,
-  RefObject,
+  type KeyboardEvent,
+  type PropsWithChildren,
+  type RefObject,
+  memo,
   useCallback,
   useEffect,
   useMemo,
@@ -30,7 +32,7 @@ const DECORATOR_DEFAULT_TEXTS = {
 } as const
 type DecoratorKeyTypes = keyof typeof DECORATOR_DEFAULT_TEXTS
 
-const multiSelectedItem = tv({
+const classNameGenerator = tv({
   slots: {
     wrapper:
       'smarthr-ui-MultiComboBox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',
@@ -71,7 +73,7 @@ export function MultiSelectedItem<T>({
   const { deletable = true } = item
 
   const classNames = useMemo(() => {
-    const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = multiSelectedItem()
+    const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()
 
     return {
       wrapper: wrapper(),
@@ -112,7 +114,7 @@ export function MultiSelectedItem<T>({
   return body
 }
 
-const ItemLabel = React.memo<
+const ItemLabel = memo<
   PropsWithChildren<{
     enableEllipsis?: boolean
     setNeedsTooltip: (flg: boolean) => void
@@ -136,7 +138,7 @@ const ItemLabel = React.memo<
   )
 })
 
-const typedMemo: <T>(c: T) => T = React.memo
+const typedMemo: <T>(c: T) => T = memo
 const EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/
 
 const BaseDestroyButton = <T,>({
@@ -155,7 +157,7 @@ const BaseDestroyButton = <T,>({
     onDelete(item)
   }, [item, onDelete])
   const onKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    (e: KeyboardEvent<HTMLButtonElement>) => {
       if (EXEC_DESTROY_KEY.test(e.key)) {
         e.stopPropagation()
 
diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
index d30a49ad9b..10b14436d3 100644
--- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
@@ -169,13 +169,7 @@ const ActualSingleComboBox = <T,>(
     isFilteringDisabled: !isEditing,
   })
 
-  const {
-    renderListBox,
-    activeOption,
-    handleKeyDown: handleListBoxKeyDown,
-    listBoxId,
-    listBoxRef,
-  } = useListBox<T>({
+  const { renderListBox, activeOption, onKeyDownListBox, listBoxId, listBoxRef } = useListBox<T>({
     options,
     dropdownHelpMessage,
     dropdownWidth,
@@ -316,9 +310,9 @@ const ActualSingleComboBox = <T,>(
           setIsExpanded(true)
         }
       }
-      handleListBoxKeyDown(e)
+      onKeyDownListBox(e)
     },
-    [isComposing, isExpanded, unfocus, handleListBoxKeyDown],
+    [isComposing, isExpanded, unfocus, onKeyDownListBox],
   )
 
   // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で
diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index eb083a9b7b..be49d18c14 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -178,7 +178,7 @@ export const useListBox = <T,>({
     }
   }, [calculateRect, isExpanded, options])
 
-  const handleKeyDown = useCallback(
+  const onKeyDownListBox = useCallback(
     (e: KeyboardEvent<HTMLElement>) => {
       setNavigationType('key')
 
@@ -347,7 +347,7 @@ export const useListBox = <T,>({
   return {
     renderListBox,
     activeOption,
-    handleKeyDown,
+    onKeyDownListBox,
     listBoxId,
     listBoxRef,
   }