From 298b8916a7ad73151afcf2aca7fb92ba6b1dc38e Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 30 Jan 2025 14:42:39 +0900
Subject: [PATCH 01/11] =?UTF-8?q?chore:=20Base=E3=81=AEstyle=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E6=96=B9=E6=B3=95=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../smarthr-ui/src/components/Base/Base.tsx   | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Base/Base.tsx b/packages/smarthr-ui/src/components/Base/Base.tsx
index 7c00642d80..ede1e55063 100644
--- a/packages/smarthr-ui/src/components/Base/Base.tsx
+++ b/packages/smarthr-ui/src/components/Base/Base.tsx
@@ -113,23 +113,22 @@ export const Base = forwardRef<HTMLDivElement, Props & ElementProps>(
     { padding, radius = 'm', overflow, layer = 1, as: Component = 'div', className, ...props },
     ref,
   ) => {
-    const styles = useMemo(() => {
-      const paddingBlock = padding instanceof Object ? padding.block : padding
-      const paddingInline = padding instanceof Object ? padding.inline : padding
+    const actualPadding = useMemo(() => {}, [])
 
-      const overflowBlock = overflow instanceof Object ? overflow.y : overflow
-      const overflowInline = overflow instanceof Object ? overflow.x : overflow
+    const styles = useMemo(() => {
+      const actualPadding = padding instanceof Object ? padding : { block: padding, inline: padding }
+      const actualOverflow = overflow instanceof Object ? overflow : { x: overflow, y: overflow }
 
       return base({
-        paddingBlock,
-        paddingInline,
+        paddingBlock: actualPadding.block,
+        paddingInline: actualPadding.inline,
         radius,
-        overflowBlock,
-        overflowInline,
+        overflowBlock: actualOverflow.y,
+        overflowInline: actualOverflow.x,
         layer,
         className,
       })
-    }, [className, layer, overflow, padding, radius])
+    }, [layer, overflow, padding, radius, className])
 
     const Wrapper = useSectionWrapper(Component)
 

From 82d62f59302192b60ee7226563e7538c67950628 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 30 Jan 2025 14:51:34 +0900
Subject: [PATCH 02/11] =?UTF-8?q?chore:=20useClassNames=E3=82=92=E5=89=8A?=
 =?UTF-8?q?=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Balloon/useClassNames.ts      | 13 -------------
 packages/smarthr-ui/src/components/Base/Base.tsx |  3 ++-
 .../components/Base/BaseColumn/BaseColumn.tsx    |  1 +
 .../Input/CurrencyInput/CurrencyInput.tsx        |  5 +----
 .../Input/CurrencyInput/useClassNames.ts         | 16 ----------------
 .../src/hooks/useClassNameGenerator.ts           | 15 ---------------
 6 files changed, 4 insertions(+), 49 deletions(-)
 delete mode 100644 packages/smarthr-ui/src/components/Balloon/useClassNames.ts
 delete mode 100644 packages/smarthr-ui/src/components/Input/CurrencyInput/useClassNames.ts
 delete mode 100644 packages/smarthr-ui/src/hooks/useClassNameGenerator.ts

diff --git a/packages/smarthr-ui/src/components/Balloon/useClassNames.ts b/packages/smarthr-ui/src/components/Balloon/useClassNames.ts
deleted file mode 100644
index e413e3f130..0000000000
--- a/packages/smarthr-ui/src/components/Balloon/useClassNames.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useMemo } from 'react'
-
-import { useClassNameGenerator } from '../../hooks/useClassNameGenerator'
-
-export function useClassNames() {
-  const generate = useClassNameGenerator('Balloon')
-  return useMemo(
-    () => ({
-      wrapper: generate(),
-    }),
-    [generate],
-  )
-}
diff --git a/packages/smarthr-ui/src/components/Base/Base.tsx b/packages/smarthr-ui/src/components/Base/Base.tsx
index ede1e55063..6cd0057823 100644
--- a/packages/smarthr-ui/src/components/Base/Base.tsx
+++ b/packages/smarthr-ui/src/components/Base/Base.tsx
@@ -116,7 +116,8 @@ export const Base = forwardRef<HTMLDivElement, Props & ElementProps>(
     const actualPadding = useMemo(() => {}, [])
 
     const styles = useMemo(() => {
-      const actualPadding = padding instanceof Object ? padding : { block: padding, inline: padding }
+      const actualPadding =
+        padding instanceof Object ? padding : { block: padding, inline: padding }
       const actualOverflow = overflow instanceof Object ? overflow : { x: overflow, y: overflow }
 
       return base({
diff --git a/packages/smarthr-ui/src/components/Base/BaseColumn/BaseColumn.tsx b/packages/smarthr-ui/src/components/Base/BaseColumn/BaseColumn.tsx
index 476ecab087..07e4326a3d 100644
--- a/packages/smarthr-ui/src/components/Base/BaseColumn/BaseColumn.tsx
+++ b/packages/smarthr-ui/src/components/Base/BaseColumn/BaseColumn.tsx
@@ -38,5 +38,6 @@ export const BaseColumn: React.FC<BaseProps & Props & ElementProps> = ({
   ...props
 }) => {
   const styles = useMemo(() => baseColumn({ bgColor, className }), [bgColor, className])
+
   return <Base {...props} padding={padding} layer={0} className={styles} />
 }
diff --git a/packages/smarthr-ui/src/components/Input/CurrencyInput/CurrencyInput.tsx b/packages/smarthr-ui/src/components/Input/CurrencyInput/CurrencyInput.tsx
index 54788bbd78..8015fe5dd9 100644
--- a/packages/smarthr-ui/src/components/Input/CurrencyInput/CurrencyInput.tsx
+++ b/packages/smarthr-ui/src/components/Input/CurrencyInput/CurrencyInput.tsx
@@ -13,7 +13,6 @@ import React, {
 import { Input } from '../Input'
 
 import { formatCurrency } from './currencyInputHelper'
-import { useClassNames } from './useClassNames'
 
 type Props = Omit<React.ComponentProps<typeof Input>, 'type' | 'value' | 'defaultValue'> & {
   /** 通貨の値 */
@@ -96,8 +95,6 @@ export const CurrencyInput = forwardRef<HTMLInputElement, Props>(
       [onBlur],
     )
 
-    const classNames = useClassNames(className)
-
     return (
       <Input
         {...props}
@@ -105,7 +102,7 @@ export const CurrencyInput = forwardRef<HTMLInputElement, Props>(
         onFocus={handleFocus}
         onBlur={handleBlur}
         ref={innerRef}
-        className={classNames.wrapper}
+        className={`smarthr-ui-CurrencyInput${className ? ` ${className}` : ''}`}
       />
     )
   },
diff --git a/packages/smarthr-ui/src/components/Input/CurrencyInput/useClassNames.ts b/packages/smarthr-ui/src/components/Input/CurrencyInput/useClassNames.ts
deleted file mode 100644
index 79518911fd..0000000000
--- a/packages/smarthr-ui/src/components/Input/CurrencyInput/useClassNames.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useMemo } from 'react'
-
-import { useClassNameGenerator } from '../../../hooks/useClassNameGenerator'
-
-import { CurrencyInput } from './CurrencyInput'
-
-export function useClassNames(className: string) {
-  const generate = useClassNameGenerator(CurrencyInput.displayName || 'CurrencyInput')
-
-  return useMemo(
-    () => ({
-      wrapper: `${className} ${generate()}`,
-    }),
-    [generate, className],
-  )
-}
diff --git a/packages/smarthr-ui/src/hooks/useClassNameGenerator.ts b/packages/smarthr-ui/src/hooks/useClassNameGenerator.ts
deleted file mode 100644
index b1b8a360bd..0000000000
--- a/packages/smarthr-ui/src/hooks/useClassNameGenerator.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useCallback } from 'react'
-
-const PREFIX = 'smarthr-ui'
-
-export function useClassNameGenerator(componentName: string) {
-  return useCallback(
-    (partName?: string) => {
-      if (!partName) {
-        return `${PREFIX}-${componentName}`
-      }
-      return `${PREFIX}-${componentName}-${partName}`
-    },
-    [componentName],
-  )
-}

From 400f853072a205b8cfec960588407a68d56cf3eb Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 30 Jan 2025 14:59:52 +0900
Subject: [PATCH 03/11] =?UTF-8?q?chore:=20Ballon=E3=82=92memo=E5=8C=96?=
 =?UTF-8?q?=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Balloon/Balloon.tsx        | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Balloon/Balloon.tsx b/packages/smarthr-ui/src/components/Balloon/Balloon.tsx
index e6078d6e92..d514507b23 100644
--- a/packages/smarthr-ui/src/components/Balloon/Balloon.tsx
+++ b/packages/smarthr-ui/src/components/Balloon/Balloon.tsx
@@ -119,17 +119,13 @@ type Props = PropsWithChildren<
 
 type ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props>
 
-export const Balloon: FC<Props & ElementProps> = ({
-  horizontal,
-  vertical,
-  className,
-  as: Component = 'div',
-  ...props
-}) => {
-  const styles = useMemo(
-    () => balloon({ horizontal, vertical, className }),
-    [className, horizontal, vertical],
-  )
+export const Balloon = React.memo<Props & ElementProps>(
+  ({ horizontal, vertical, className, as: Component = 'div', ...props }) => {
+    const styles = useMemo(
+      () => balloon({ horizontal, vertical, className }),
+      [horizontal, vertical, className],
+    )
 
-  return <Component {...props} className={styles} />
-}
+    return <Component {...props} className={styles} />
+  },
+)

From 17cf606ee13aae28aa3b059cc517b356d1a6843c Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 30 Jan 2025 15:16:46 +0900
Subject: [PATCH 04/11] =?UTF-8?q?chore:=20Badge=E3=81=A7=E4=BD=99=E8=A8=88?=
 =?UTF-8?q?=E3=81=AAhook=E3=81=8C=E5=91=BC=E3=81=B3=E5=87=BA=E3=81=95?=
 =?UTF-8?q?=E3=82=8C=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=80=81=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92?=
 =?UTF-8?q?=E5=88=86=E5=89=B2=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../smarthr-ui/src/components/Badge/Badge.tsx | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Badge/Badge.tsx b/packages/smarthr-ui/src/components/Badge/Badge.tsx
index 972b424487..096b10df89 100644
--- a/packages/smarthr-ui/src/components/Badge/Badge.tsx
+++ b/packages/smarthr-ui/src/components/Badge/Badge.tsx
@@ -93,19 +93,32 @@ const badge = tv({
 })
 
 export const Badge: React.FC<BadgeProps> = ({
+  count,
+  showZero,
+  ...rest
+}) => {
+  const actualCount = count && count > 0 ? count : showZero ? 0 : undefined
+
+  // ドット表示でもなく、0値を表示するでもない場合は何も表示しない
+  if (actualCount === undefined && !props.dot && !props.children ) {
+    return null
+  }
+
+  return <ActualBadge {...rest} count={actualCount} />
+}
+
+const ActualBadge: React.FC<Omit<BadgeProps, 'showZero'>> = ({
   count,
   overflowCount = 99,
-  showZero = false,
   type = 'blue',
-  dot = false,
+  dot,
   children,
   className,
   ...props
 }) => {
-  const actualCount = count && count > 0 ? count : showZero ? 0 : undefined
-
   const { wrapperStyle, pillStyle, dotStyle } = useMemo(() => {
     const { wrapper, pill, dotElement } = badge({ color: type, withChildren: !!children })
+
     return {
       wrapperStyle: wrapper({ className }),
       pillStyle: pill(),
@@ -113,18 +126,15 @@ export const Badge: React.FC<BadgeProps> = ({
     }
   }, [children, className, type])
 
-  // ドット表示でもなく、0値を表示するでもない場合は何も表示しない
-  if (!dot && !children && actualCount === undefined) return null
-
   return (
     <span {...props} className={wrapperStyle}>
       {children}
       {dot ? (
         <span className={dotStyle} />
       ) : (
-        actualCount !== undefined && (
+        count !== undefined && (
           <Text size="XS" className={pillStyle}>
-            {actualCount > overflowCount ? `${overflowCount}+` : actualCount}
+            {count > overflowCount ? `${overflowCount}+` : count}
           </Text>
         )
       )}

From dc96fd86084563a17a1fa678dc92e14ff169e24a Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 30 Jan 2025 15:23:29 +0900
Subject: [PATCH 05/11] =?UTF-8?q?chore:=20Badge=E3=81=AEstyle=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E3=82=92memo=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../smarthr-ui/src/components/Badge/Badge.tsx | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Badge/Badge.tsx b/packages/smarthr-ui/src/components/Badge/Badge.tsx
index 096b10df89..6fcb7b40f0 100644
--- a/packages/smarthr-ui/src/components/Badge/Badge.tsx
+++ b/packages/smarthr-ui/src/components/Badge/Badge.tsx
@@ -100,7 +100,7 @@ export const Badge: React.FC<BadgeProps> = ({
   const actualCount = count && count > 0 ? count : showZero ? 0 : undefined
 
   // ドット表示でもなく、0値を表示するでもない場合は何も表示しない
-  if (actualCount === undefined && !props.dot && !props.children ) {
+  if (actualCount === undefined && !rest.dot && !rest.children ) {
     return null
   }
 
@@ -114,26 +114,28 @@ const ActualBadge: React.FC<Omit<BadgeProps, 'showZero'>> = ({
   dot,
   children,
   className,
-  ...props
+  ...rest
 }) => {
-  const { wrapperStyle, pillStyle, dotStyle } = useMemo(() => {
-    const { wrapper, pill, dotElement } = badge({ color: type, withChildren: !!children })
+  // HINT: boolean化することでmemoが有効になる可能性を高くする
+  const withChildren = !!children
+  const styles = useMemo(() => {
+    const { wrapper, pill, dotElement } = badge({ color: type, withChildren })
 
     return {
-      wrapperStyle: wrapper({ className }),
-      pillStyle: pill(),
-      dotStyle: dotElement(),
+      wrapper: wrapper({ className }),
+      pill: pill(),
+      dot: dotElement(),
     }
-  }, [children, className, type])
+  }, [withChildren, type, className])
 
   return (
-    <span {...props} className={wrapperStyle}>
+    <span {...rest} className={styles.wrapper}>
       {children}
       {dot ? (
-        <span className={dotStyle} />
+        <span className={styles.dot} />
       ) : (
         count !== undefined && (
-          <Text size="XS" className={pillStyle}>
+          <Text size="XS" className={styles.pill}>
             {count > overflowCount ? `${overflowCount}+` : count}
           </Text>
         )

From 6fecab56ebacb99d3e607a93481f5499a5f6fde3 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 30 Jan 2025 15:23:47 +0900
Subject: [PATCH 06/11] =?UTF-8?q?chore:=20Badge=E3=81=AEstyle=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E3=82=92memo=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/Badge/Badge.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Badge/Badge.tsx b/packages/smarthr-ui/src/components/Badge/Badge.tsx
index 6fcb7b40f0..d63d7dfef3 100644
--- a/packages/smarthr-ui/src/components/Badge/Badge.tsx
+++ b/packages/smarthr-ui/src/components/Badge/Badge.tsx
@@ -92,15 +92,11 @@ const badge = tv({
   ],
 })
 
-export const Badge: React.FC<BadgeProps> = ({
-  count,
-  showZero,
-  ...rest
-}) => {
+export const Badge: React.FC<BadgeProps> = ({ count, showZero, ...rest }) => {
   const actualCount = count && count > 0 ? count : showZero ? 0 : undefined
 
   // ドット表示でもなく、0値を表示するでもない場合は何も表示しない
-  if (actualCount === undefined && !rest.dot && !rest.children ) {
+  if (actualCount === undefined && !rest.dot && !rest.children) {
     return null
   }
 

From 1a971a46e1ae5e9b992fe164fb2128e8b721b549 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 30 Jan 2025 15:30:10 +0900
Subject: [PATCH 07/11] =?UTF-8?q?chore:=20Badge=E5=86=85=E3=81=AE=E5=AD=90?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=82=92=E5=AE=9A=E7=BE=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../smarthr-ui/src/components/Badge/Badge.tsx | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Badge/Badge.tsx b/packages/smarthr-ui/src/components/Badge/Badge.tsx
index d63d7dfef3..2477653854 100644
--- a/packages/smarthr-ui/src/components/Badge/Badge.tsx
+++ b/packages/smarthr-ui/src/components/Badge/Badge.tsx
@@ -105,8 +105,8 @@ export const Badge: React.FC<BadgeProps> = ({ count, showZero, ...rest }) => {
 
 const ActualBadge: React.FC<Omit<BadgeProps, 'showZero'>> = ({
   count,
-  overflowCount = 99,
-  type = 'blue',
+  overflowCount,
+  type,
   dot,
   children,
   className,
@@ -115,7 +115,7 @@ const ActualBadge: React.FC<Omit<BadgeProps, 'showZero'>> = ({
   // HINT: boolean化することでmemoが有効になる可能性を高くする
   const withChildren = !!children
   const styles = useMemo(() => {
-    const { wrapper, pill, dotElement } = badge({ color: type, withChildren })
+    const { wrapper, pill, dotElement } = badge({ color: type | 'blue', withChildren })
 
     return {
       wrapper: wrapper({ className }),
@@ -128,14 +128,21 @@ const ActualBadge: React.FC<Omit<BadgeProps, 'showZero'>> = ({
     <span {...rest} className={styles.wrapper}>
       {children}
       {dot ? (
-        <span className={styles.dot} />
+        <Dot className={styles.dot} />
       ) : (
-        count !== undefined && (
-          <Text size="XS" className={styles.pill}>
-            {count > overflowCount ? `${overflowCount}+` : count}
-          </Text>
-        )
+        <CountText count={count} overflowCount={overflowCount} className={styles.pill} />
       )}
     </span>
   )
 }
+
+const Dot = React.memo<{ className: string }>(({ className }) => <span className={className} />)
+
+const CountText = React.memo<Pick<BadgeProps, 'count' | 'overflowCount'> & { className: string }>(
+  ({ count, overflowCount = 99, className }) =>
+    count !== undefined && (
+      <Text size="XS" className={className}>
+        {count > overflowCount ? `${overflowCount}+` : count}
+      </Text>
+    ),
+)

From 9601956166364d7b7c843b0e9974e4c010801461 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 30 Jan 2025 15:31:39 +0900
Subject: [PATCH 08/11] =?UTF-8?q?chore:=20Badge=E8=87=AA=E4=BD=93=E3=82=92?=
 =?UTF-8?q?memo=E5=8C=96=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/Badge/Badge.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Badge/Badge.tsx b/packages/smarthr-ui/src/components/Badge/Badge.tsx
index 2477653854..cbf002da31 100644
--- a/packages/smarthr-ui/src/components/Badge/Badge.tsx
+++ b/packages/smarthr-ui/src/components/Badge/Badge.tsx
@@ -92,7 +92,7 @@ const badge = tv({
   ],
 })
 
-export const Badge: React.FC<BadgeProps> = ({ count, showZero, ...rest }) => {
+export const Badge = React.memo<BadgeProps>(({ count, showZero, ...rest }) => {
   const actualCount = count && count > 0 ? count : showZero ? 0 : undefined
 
   // ドット表示でもなく、0値を表示するでもない場合は何も表示しない
@@ -101,7 +101,7 @@ export const Badge: React.FC<BadgeProps> = ({ count, showZero, ...rest }) => {
   }
 
   return <ActualBadge {...rest} count={actualCount} />
-}
+})
 
 const ActualBadge: React.FC<Omit<BadgeProps, 'showZero'>> = ({
   count,

From bedb8aa5973aa53e6d50004effbeec1be59c8cbf Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 30 Jan 2025 15:57:23 +0900
Subject: [PATCH 09/11] chore: fix ci

---
 packages/smarthr-ui/src/components/Badge/Badge.tsx     | 2 +-
 packages/smarthr-ui/src/components/Balloon/Balloon.tsx | 2 +-
 packages/smarthr-ui/src/components/Base/Base.tsx       | 2 --
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Badge/Badge.tsx b/packages/smarthr-ui/src/components/Badge/Badge.tsx
index cbf002da31..1cab20c594 100644
--- a/packages/smarthr-ui/src/components/Badge/Badge.tsx
+++ b/packages/smarthr-ui/src/components/Badge/Badge.tsx
@@ -115,7 +115,7 @@ const ActualBadge: React.FC<Omit<BadgeProps, 'showZero'>> = ({
   // HINT: boolean化することでmemoが有効になる可能性を高くする
   const withChildren = !!children
   const styles = useMemo(() => {
-    const { wrapper, pill, dotElement } = badge({ color: type | 'blue', withChildren })
+    const { wrapper, pill, dotElement } = badge({ color: type || 'blue', withChildren })
 
     return {
       wrapper: wrapper({ className }),
diff --git a/packages/smarthr-ui/src/components/Balloon/Balloon.tsx b/packages/smarthr-ui/src/components/Balloon/Balloon.tsx
index d514507b23..04f5493b18 100644
--- a/packages/smarthr-ui/src/components/Balloon/Balloon.tsx
+++ b/packages/smarthr-ui/src/components/Balloon/Balloon.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, FC, PropsWithChildren, useMemo } from 'react'
+import React, { ComponentPropsWithoutRef, PropsWithChildren, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
 // HINT: trianble部分はRetinaディスプレイなどで途切れてしまう場合があるので
diff --git a/packages/smarthr-ui/src/components/Base/Base.tsx b/packages/smarthr-ui/src/components/Base/Base.tsx
index 6cd0057823..18e57f6db9 100644
--- a/packages/smarthr-ui/src/components/Base/Base.tsx
+++ b/packages/smarthr-ui/src/components/Base/Base.tsx
@@ -113,8 +113,6 @@ export const Base = forwardRef<HTMLDivElement, Props & ElementProps>(
     { padding, radius = 'm', overflow, layer = 1, as: Component = 'div', className, ...props },
     ref,
   ) => {
-    const actualPadding = useMemo(() => {}, [])
-
     const styles = useMemo(() => {
       const actualPadding =
         padding instanceof Object ? padding : { block: padding, inline: padding }

From 673f83da100bf6e7ba4769a8ec98e47aa34473cf Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Fri, 31 Jan 2025 07:13:51 +0900
Subject: [PATCH 10/11] =?UTF-8?q?chore:=20Badge=E3=81=ABdot=E3=81=8C?=
 =?UTF-8?q?=E6=8C=87=E5=AE=9A=E3=81=95=E3=82=8C=E3=81=9F=E5=A0=B4=E5=90=88?=
 =?UTF-8?q?=E3=81=AE=E3=83=AD=E3=82=B8=E3=83=83=E3=82=AF=E3=82=92=E6=9C=80?=
 =?UTF-8?q?=E9=81=A9=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/Badge/Badge.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Badge/Badge.tsx b/packages/smarthr-ui/src/components/Badge/Badge.tsx
index 1cab20c594..061806dbef 100644
--- a/packages/smarthr-ui/src/components/Badge/Badge.tsx
+++ b/packages/smarthr-ui/src/components/Badge/Badge.tsx
@@ -93,10 +93,15 @@ const badge = tv({
 })
 
 export const Badge = React.memo<BadgeProps>(({ count, showZero, ...rest }) => {
+  // ドット表示の場合、数値表示は無いため、早期returnする
+  if (rest.dot) {
+    return <ActualBadge {...rest} />
+  }
+
   const actualCount = count && count > 0 ? count : showZero ? 0 : undefined
 
-  // ドット表示でもなく、0値を表示するでもない場合は何も表示しない
-  if (actualCount === undefined && !rest.dot && !rest.children) {
+  // 0値を表示するでもない場合は何も表示しない
+  if (actualCount === undefined && !rest.children) {
     return null
   }
 

From b1bc541e6597b8251086dece0bf4308531ceb760 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 6 Feb 2025 13:49:45 +0900
Subject: [PATCH 11/11] chore: style -> className

---
 packages/smarthr-ui/src/components/Badge/Badge.tsx     | 8 ++++----
 packages/smarthr-ui/src/components/Balloon/Balloon.tsx | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Badge/Badge.tsx b/packages/smarthr-ui/src/components/Badge/Badge.tsx
index 061806dbef..a987796d8f 100644
--- a/packages/smarthr-ui/src/components/Badge/Badge.tsx
+++ b/packages/smarthr-ui/src/components/Badge/Badge.tsx
@@ -119,7 +119,7 @@ const ActualBadge: React.FC<Omit<BadgeProps, 'showZero'>> = ({
 }) => {
   // HINT: boolean化することでmemoが有効になる可能性を高くする
   const withChildren = !!children
-  const styles = useMemo(() => {
+  const classNames = useMemo(() => {
     const { wrapper, pill, dotElement } = badge({ color: type || 'blue', withChildren })
 
     return {
@@ -130,12 +130,12 @@ const ActualBadge: React.FC<Omit<BadgeProps, 'showZero'>> = ({
   }, [withChildren, type, className])
 
   return (
-    <span {...rest} className={styles.wrapper}>
+    <span {...rest} className={classNames.wrapper}>
       {children}
       {dot ? (
-        <Dot className={styles.dot} />
+        <Dot className={classNames.dot} />
       ) : (
-        <CountText count={count} overflowCount={overflowCount} className={styles.pill} />
+        <CountText count={count} overflowCount={overflowCount} className={classNames.pill} />
       )}
     </span>
   )
diff --git a/packages/smarthr-ui/src/components/Balloon/Balloon.tsx b/packages/smarthr-ui/src/components/Balloon/Balloon.tsx
index 04f5493b18..1cb9de2438 100644
--- a/packages/smarthr-ui/src/components/Balloon/Balloon.tsx
+++ b/packages/smarthr-ui/src/components/Balloon/Balloon.tsx
@@ -121,11 +121,11 @@ type ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props>
 
 export const Balloon = React.memo<Props & ElementProps>(
   ({ horizontal, vertical, className, as: Component = 'div', ...props }) => {
-    const styles = useMemo(
+    const actualClassName = useMemo(
       () => balloon({ horizontal, vertical, className }),
       [horizontal, vertical, className],
     )
 
-    return <Component {...props} className={styles} />
+    return <Component {...props} className={actualClassName} />
   },
 )