From 355363a80a5f6bb68c5ae3d900a2d4e0cca15e40 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 5 Sep 2024 07:50:51 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20Swith=E3=81=AE=E5=9E=8B=E3=82=92?=
 =?UTF-8?q?=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/Switch/Switch.tsx | 13 +++++++++----
 .../VisuallyHiddenText/VisuallyHiddenText.tsx   | 17 ++++++++++-------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Switch/Switch.tsx b/packages/smarthr-ui/src/components/Switch/Switch.tsx
index ef84fa9f30..2b12292d95 100644
--- a/packages/smarthr-ui/src/components/Switch/Switch.tsx
+++ b/packages/smarthr-ui/src/components/Switch/Switch.tsx
@@ -55,14 +55,19 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
 export const Switch = forwardRef<HTMLInputElement, Props>(
   ({ children, dangerouslyLabelHidden, className, id, ...props }, ref) => {
     const { wrapper, input, icon, iconWrapper } = useMemo(() => switchStyle(), [])
-    const ActualLabel = dangerouslyLabelHidden ? VisuallyHiddenText : Text
     const inputId = useId(id)
 
     return (
       <Cluster align="center">
-        <ActualLabel as="label" htmlFor={inputId}>
-          {children}
-        </ActualLabel>
+        {dangerouslyLabelHidden ? (
+          <VisuallyHiddenText as="label" htmlFor={inputId}>
+            {children}
+          </VisuallyHiddenText>
+        ) : (
+          <label htmlFor={inputId}>
+            <Text>{children}</Text>
+          </label>
+        )}
         <span className={wrapper({ className })}>
           {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
           <input
diff --git a/packages/smarthr-ui/src/components/VisuallyHiddenText/VisuallyHiddenText.tsx b/packages/smarthr-ui/src/components/VisuallyHiddenText/VisuallyHiddenText.tsx
index cd48cd7938..ae8fbd595f 100644
--- a/packages/smarthr-ui/src/components/VisuallyHiddenText/VisuallyHiddenText.tsx
+++ b/packages/smarthr-ui/src/components/VisuallyHiddenText/VisuallyHiddenText.tsx
@@ -5,13 +5,16 @@ export const visuallyHiddenText = tv({
   base: 'shr-absolute -shr-top-px shr-left-0 shr-h-px shr-w-px shr-overflow-hidden shr-whitespace-nowrap shr-border-0 shr-p-0 [clip-path:inset(100%)] [clip:rect(0_0_0_0)]',
 })
 
-export const VisuallyHiddenText: React.FC<
-  PropsWithChildren<
-    {
-      as?: string | React.ComponentType<any>
-    } & ComponentProps<'span'>
-  >
-> = ({ as: Component = 'span', className, ...props }) => {
+type Props<T extends React.ElementType> = PropsWithChildren<{
+  as?: T
+}> &
+  ComponentProps<T>
+
+export const VisuallyHiddenText = <T extends React.ElementType = 'span'>({
+  as: Component = 'span',
+  className,
+  ...props
+}: Props<T>) => {
   const styles = useMemo(() => visuallyHiddenText({ className }), [className])
 
   return <Component {...props} className={styles} />