@simplysm/solid 13.0.69 → 13.0.70

package/src/components/features/shared-data/SharedDataSelectListContext.ts

@@ -0,0 +1,39 @@
+import { createContext, useContext, type JSX, type ParentComponent, onCleanup } from "solid-js";
+import { createSlotComponent } from "../../../helpers/createSlotComponent";
+import type { SlotAccessor } from "../../../hooks/createSlotSignal";
+
+// ─── Context ──────────────────────────────────────────────
+
+export interface SharedDataSelectListContextValue {
+  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
+  setFilter: (content: SlotAccessor) => void;
+}
+
+export const SharedDataSelectListContext = createContext<SharedDataSelectListContextValue>();
+
+export function useSharedDataSelectListContext(): SharedDataSelectListContextValue {
+  const context = useContext(SharedDataSelectListContext);
+  if (!context) {
+    throw new Error("useSharedDataSelectListContext can only be used inside SharedDataSelectList");
+  }
+  return context;
+}
+
+// ─── Sub-components ───────────────────────────────────────
+
+/** ItemTemplate sub-component — registers item render function */
+export const SharedDataSelectListItemTemplate = <TItem,>(props: {
+  children: (item: TItem, index: number) => JSX.Element;
+}) => {
+  const ctx = useSharedDataSelectListContext();
+  // eslint-disable-next-line solid/reactivity -- Store render function in signal, called from JSX tracked scope
+  ctx.setItemTemplate(props.children as (...args: unknown[]) => JSX.Element);
+  onCleanup(() => ctx.setItemTemplate(undefined));
+  return null;
+};
+
+/** Filter sub-component — registers custom filter UI slot */
+export const SharedDataSelectListFilter: ParentComponent = createSlotComponent(
+  SharedDataSelectListContext,
+  (ctx) => ctx.setFilter,
+);

package/src/components/feedback/Progress.tsx

@@ -10,7 +10,7 @@ import {
 export type ProgressTheme = SemanticTheme;
 
 export interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  /** 진행률 (0~1 범위, 0 = 0%, 1 = 100%) */
+  /** Progress value (range 0-1, 0 = 0%, 1 = 100%) */
   value: number;
   theme?: ProgressTheme;
   size?: ComponentSizeCompact;

package/src/components/feedback/busy/BusyContainer.tsx

@@ -14,9 +14,9 @@ import { createMountTransition } from "../../../hooks/createMountTransition";
 import "./BusyContainer.css";
 
 export interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
-  /** 로딩 오버레이 표시 (children은 유지됨) */
+  /** Show loading overlay (children are preserved) */
   busy?: boolean;
-  /** false이면 children을 숨기고 로딩 오버레이 표시. 초기 데이터 로드 시 사용 */
+  /** If false, children are hidden and loading overlay is shown. Used for initial data loading */
   ready?: boolean;
   variant?: BusyVariant;
   message?: string;
@@ -26,7 +26,7 @@ export interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivEleme
 
 const baseClass = clsx("relative", "size-full", "min-h-[70px] min-w-[70px]", "overflow-auto");
 
-// eslint-disable-next-line tailwindcss/enforces-shorthand -- inset은 Chrome 87+에서만 지원
+// eslint-disable-next-line tailwindcss/enforces-shorthand -- inset is only supported in Chrome 87+
 const screenBaseClass = clsx(
   "absolute bottom-0 left-0 right-0 top-0",
   "z-busy",
@@ -71,7 +71,7 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
   const busyCtx = useContext(BusyContext);
   const currVariant = (): BusyVariant => local.variant ?? busyCtx?.variant() ?? "spinner";
 
-  // 애니메이션 상태 (mount transition)
+  // Animation state (mount transition)
   const { mounted, animating, unmount } = createMountTransition(
     () => local.ready === false || !!local.busy,
   );
@@ -83,7 +83,7 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
     }
   };
 
-  // 키보드 입력 차단 (캡처 단계)
+  // Block keyboard input (capture phase)
   let containerRef!: HTMLDivElement;
 
   createEffect(() => {
@@ -106,7 +106,7 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
       animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
     );
 
-  // spinner: 슬라이드 다운 애니메이션
+  // spinner: slide down animation
   const rectClass = () => {
     if (currVariant() !== "spinner") return "";
     return clsx(

package/src/components/feedback/busy/BusyContext.ts

@@ -1,38 +1,38 @@
 import { createContext, useContext, type Accessor } from "solid-js";
 
 /**
- * Busy 오버레이 표시 방식
- * - `spinner`: 전체 화면 스피너
- * - `bar`: 상단 프로그레스 바
+ * Busy overlay display type
+ * - `spinner`: Full-screen spinner
+ * - `bar`: Top progress bar
  */
 export type BusyVariant = "spinner" | "bar";
 
 /**
- * Busy 오버레이 Context 값
+ * Busy overlay Context value
  */
 export interface BusyContextValue {
-  /** 현재 표시 방식 */
+  /** Current display type */
   variant: Accessor<BusyVariant>;
-  /** 오버레이 표시 (중첩 호출 가능, 호출 횟수만큼 hide 필요) */
+  /** Show overlay (nestable calls, requires matching hide calls) */
   show: (message?: string) => void;
-  /** 오버레이 숨김 (모든 show에 대응하는 hide 호출 후 실제 숨김) */
+  /** Hide overlay (actually hides after all show calls have corresponding hide calls) */
   hide: () => void;
-  /** 프로그레스 바 진행률 설정 (0~100, undefined면 indeterminate) */
+  /** Set progress bar progress (0-100, undefined for indeterminate) */
   setProgress: (percent: number | undefined) => void;
 }
 
-/** Busy 오버레이 Context */
+/** Busy overlay Context */
 export const BusyContext = createContext<BusyContextValue>();
 
 /**
- * Busy 오버레이에 접근하는 훅
+ * Hook to access Busy overlay
  *
- * @throws BusyProvider가 없으면 에러 발생
+ * @throws Error if BusyProvider is not present
  */
 export function useBusy(): BusyContextValue {
   const context = useContext(BusyContext);
   if (!context) {
-    throw new Error("useBusy는 BusyProvider 내부에서만 사용할 수 있습니다");
+    throw new Error("useBusy can only be used inside BusyProvider");
   }
   return context;
 }

package/src/components/feedback/busy/BusyProvider.tsx

@@ -6,19 +6,19 @@ import { BusyContainer } from "./BusyContainer";
 
 const overlayClass = clsx("fixed left-0 top-0", "h-screen w-screen", "overflow-hidden");
 
-/** BusyProvider 설정 */
+/** BusyProvider configuration */
 export interface BusyProviderProps {
-  /** 표시 방식 (기본값: `"spinner"`) */
+  /** Display style (default: `"spinner"`) */
   variant?: BusyVariant;
 }
 
 /**
- * Busy 오버레이 Provider
+ * Busy Overlay Provider
  *
  * @remarks
- * - show/hide는 중첩 호출 가능 (내부 카운터로 관리)
- * - Portal로 렌더링하여 항상 최상위에 표시
- * - 독립적으로 동작 (다른 Provider 의존성 없음)
+ * - show/hide can be nested (managed with internal counter)
+ * - Renders via Portal to always display on top
+ * - Works independently (no other Provider dependencies)
  */
 export const BusyProvider: ParentComponent<BusyProviderProps> = (props) => {
   const [busyCount, setBusyCount] = createSignal(0);

package/src/components/feedback/notification/NotificationBanner.tsx

@@ -3,6 +3,7 @@ import { Portal } from "solid-js/web";
 import clsx from "clsx";
 import { IconX } from "@tabler/icons-solidjs";
 import { useNotification } from "./NotificationContext";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 import { Icon } from "../../display/Icon";
 import { themeTokens } from "../../../styles/tokens.styles";
 
@@ -38,6 +39,7 @@ const dismissButtonClass = clsx("rounded", "p-1", "hover:bg-white/20");
 
 export const NotificationBanner: Component = () => {
   const notification = useNotification();
+  const i18n = useI18nOptional();
 
   const handleDismiss = () => {
     notification.dismissBanner();
@@ -72,7 +74,7 @@ export const NotificationBanner: Component = () => {
               </Show>
               <button
                 type="button"
-                aria-label="알림 닫기"
+                aria-label={i18n?.t("notification.close") ?? "Close notification"}
                 class={dismissButtonClass}
                 onClick={handleDismiss}
               >

package/src/components/feedback/notification/NotificationBell.tsx

@@ -78,7 +78,7 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
             type="button"
             data-notification-bell
             class={buttonClass}
-            aria-label={`알림 ${notification.unreadCount()}개`}
+            aria-label={`${notification.unreadCount()} notifications`}
             aria-haspopup="true"
             aria-expanded={open()}
           >
@@ -93,7 +93,7 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
         <Dropdown.Content>
           <div class="w-80 p-2">
             <div class={dropdownHeaderClass}>
-              <span class="font-bold">알림</span>
+              <span class="font-bold">Notifications</span>
               <Show when={notification.items().length > 0}>
                 <button
                   type="button"
@@ -101,14 +101,14 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
                   class={clearButtonClass}
                   onClick={handleClear}
                 >
-                  전체 삭제
+                  Clear All
                 </button>
               </Show>
             </div>
 
             <Show
               when={notification.items().length > 0}
-              fallback={<div class={emptyClass}>알림이 없습니다</div>}
+              fallback={<div class={emptyClass}>No notifications</div>}
             >
               <div class={listClass}>
                 <For each={[...notification.items()].reverse()}>

package/src/components/feedback/notification/NotificationContext.ts

@@ -1,95 +1,95 @@
 import { type Accessor, createContext, useContext } from "solid-js";
 
-/** 알림 테마 */
+/** Notification theme */
 export type NotificationTheme = "info" | "success" | "warning" | "danger";
 
-/** 알림 액션 버튼 */
+/** Notification action button */
 export interface NotificationAction {
-  /** 버튼 텍스트 */
+  /** Button text */
   label: string;
-  /** 클릭 핸들러 */
+  /** Click handler */
   onClick: () => void;
 }
 
-/** 알림 항목 */
+/** Notification item */
 export interface NotificationItem {
-  /** 고유 식별자 */
+  /** Unique identifier */
   id: string;
-  /** 테마 (info, success, warning, danger) */
+  /** Theme (info, success, warning, danger) */
   theme: NotificationTheme;
-  /** 알림 제목 */
+  /** Notification title */
   title: string;
-  /** 알림 메시지 (선택) */
+  /** Notification message (optional) */
   message?: string;
-  /** 액션 버튼 (선택) */
+  /** Action button (optional) */
   action?: NotificationAction;
-  /** 생성 시각 */
+  /** Creation time */
   createdAt: Date;
-  /** 읽음 여부 */
+  /** Read status */
   read: boolean;
 }
 
-/** 알림 생성 옵션 */
+/** Notification creation options */
 export interface NotificationOptions {
-  /** 알림에 표시할 액션 버튼 */
+  /** Action button to display in notification */
   action?: NotificationAction;
 }
 
-/** 알림 수정 옵션 */
+/** Notification update options */
 export interface NotificationUpdateOptions {
-  /** true면 읽은 알림을 다시 읽지 않음 상태로 변경 (배너 재표시) */
+  /** If true, mark read notification as unread (redisplay banner) */
   renotify?: boolean;
 }
 
 /**
- * 알림 시스템 Context 값
+ * Notification system Context value
  *
  * @remarks
- * 알림 생성, 수정, 삭제 및 읽음 관리를 위한 메서드 제공.
- * 최대 50개까지 유지되며 초과 시 오래된 항목부터 제거.
+ * Provides methods to create, update, delete, and manage read status of notifications.
+ * Maintains up to 50 notifications; older items are removed when exceeded.
  */
 export interface NotificationContextValue {
-  // 상태
+  // State
   items: Accessor<NotificationItem[]>;
   unreadCount: Accessor<number>;
   latestUnread: Accessor<NotificationItem | undefined>;
 
-  // 알림 발생 (id 반환)
+  // Create notification (returns id)
   info: (title: string, message?: string, options?: NotificationOptions) => string;
   success: (title: string, message?: string, options?: NotificationOptions) => string;
   warning: (title: string, message?: string, options?: NotificationOptions) => string;
   danger: (title: string, message?: string, options?: NotificationOptions) => string;
   error: (err?: any, header?: string) => void;
 
-  // 알림 수정
+  // Update notification
   update: (
     id: string,
     updates: Partial<Pick<NotificationItem, "title" | "message" | "theme" | "action">>,
     options?: NotificationUpdateOptions,
   ) => void;
 
-  // 알림 삭제
+  // Delete notification
   remove: (id: string) => void;
 
-  // 관리
+  // Management
   markAsRead: (id: string) => void;
   markAllAsRead: () => void;
   dismissBanner: () => void;
   clear: () => void;
 }
 
-/** 알림 시스템 Context */
+/** Notification system Context */
 export const NotificationContext = createContext<NotificationContextValue>();
 
 /**
- * 알림 시스템에 접근하는 훅
+ * Hook to access the notification system
  *
- * @throws NotificationProvider가 없으면 에러 발생
+ * @throws Error if used outside NotificationProvider
  */
 export function useNotification(): NotificationContextValue {
   const context = useContext(NotificationContext);
   if (!context) {
-    throw new Error("useNotification은 NotificationProvider 내부에서만 사용할 수 있습니다");
+    throw new Error("useNotification can only be used inside NotificationProvider");
   }
   return context;
 }

package/src/components/feedback/notification/NotificationProvider.tsx

@@ -12,13 +12,13 @@ import { useLogger } from "../../../hooks/useLogger";
 const MAX_ITEMS = 50;
 
 /**
- * 알림 시스템 Provider
+ * Notification system Provider
  *
  * @remarks
- * - 최대 50개 알림 유지 (초과 시 오래된 항목 자동 제거)
- * - 읽지 않은 최신 알림을 배너로 표시
- * - 스크린 리더용 aria-live region 포함
- * - LoggerProvider가 있으면 에러 알림을 로거에도 기록
+ * - Maintains up to 50 notifications (older items auto-removed)
+ * - Shows latest unread notification in banner
+ * - Includes aria-live region for screen readers
+ * - Logs errors to logger if LoggerProvider is present
  */
 export const NotificationProvider: ParentComponent = (props) => {
   const logger = useLogger();
@@ -99,10 +99,10 @@ export const NotificationProvider: ParentComponent = (props) => {
 
         const updated = { ...item, ...updates };
 
-        // renotify: 읽은 상태면 다시 읽지 않음으로 변경
+        // renotify: if read, change back to unread
         if (options?.renotify && item.read) {
           updated.read = false;
-          // 배너가 dismiss된 상태에서 renotify되면 다시 보이게
+          // if dismissed banner is renotified, show it again
           setDismissedBannerId(null);
         }
 
@@ -155,10 +155,10 @@ export const NotificationProvider: ParentComponent = (props) => {
 
   return (
     <NotificationContext.Provider value={contextValue}>
-      {/* 스크린 리더용 Live Region */}
+      {/* Screen reader Live Region */}
       <div role="status" aria-live="polite" aria-atomic="true" class="sr-only">
         <Show when={latestUnread()}>
-          {(item) => `알림: ${item().title} ${item().message ?? ""}`}
+          {(item) => `Notification: ${item().title} ${item().message ?? ""}`}
         </Show>
       </div>
       {props.children}

package/src/components/feedback/print/PrintContext.ts

@@ -15,6 +15,6 @@ export const PrintContext = createContext<PrintContextValue>();
 
 export function usePrint(): PrintContextValue {
   const ctx = useContext(PrintContext);
-  if (!ctx) throw new Error("usePrint는 PrintProvider 내부에서만 사용할 수 있습니다");
+  if (!ctx) throw new Error("usePrint can only be used inside PrintProvider");
   return ctx;
 }

package/src/components/form-control/Button.tsx

@@ -9,7 +9,7 @@ import {
   disabledOpacity,
 } from "../../styles/tokens.styles";
 
-// Directive 사용 선언 (TypeScript용)
+// Directive usage declaration (for TypeScript)
 void ripple;
 
 type ButtonTheme = SemanticTheme;

package/src/components/form-control/DropdownTrigger.styles.ts

@@ -38,7 +38,7 @@ export const triggerSizeClasses: Record<ComponentSize, string> = {
 
 export const chevronWrapperClass = clsx("opacity-30", "hover:opacity-100");
 
-/** Select/Combobox 공유 트리거 클래스 빌더 */
+/** Select/Combobox shared trigger class builder */
 export function getTriggerClass(options: {
   size?: ComponentSize;
   disabled?: boolean;

package/src/components/form-control/Invalid.tsx

@@ -27,13 +27,13 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
 
   const resolved = children(() => props.children);
 
-  // message 변경 시 setCustomValidity 반응형 업데이트 (touchMode 무관하게 항상)
+  // Reactively update setCustomValidity when message changes (always, regardless of touchMode)
   createEffect(() => {
     const msg = props.message ?? "";
     hiddenInputEl.setCustomValidity(msg);
   });
 
-  // target에 relative 설정 + hidden input을 target 내부에 삽입
+  // Set target to relative + insert hidden input inside target
   createEffect(() => {
     const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
     if (!targetEl) return;
@@ -52,7 +52,7 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
     });
   });
 
-  // 시각적 표시 처리
+  // Handle visual indication
   createEffect(() => {
     const variant = props.variant ?? "dot";
     const message = props.message ?? "";
@@ -102,7 +102,7 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
     }
   });
 
-  // touchMode: target에 focusout 이벤트 등록하여 touched 상태 추적
+  // touchMode: register focusout event on target to track touched state
   createEffect(() => {
     if (!(props.touchMode ?? false)) return;
 
@@ -121,7 +121,7 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
     });
   });
 
-  // hidden input 포커스 시 target의 focusable child로 리디렉션
+  // Redirect hidden input focus to focusable child of target
   hiddenInputEl.addEventListener("focus", () => {
     const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
 

package/src/components/form-control/ThemeToggle.tsx

@@ -19,33 +19,33 @@ const iconSizes: Record<"sm" | "lg", string> = {
 };
 
 const modeLabels: Record<ThemeMode, string> = {
-  light: "라이트 모드",
-  system: "시스템 설정",
-  dark: "다크 모드",
+  light: "Light mode",
+  system: "System settings",
+  dark: "Dark mode",
 };
 
 export interface ThemeToggleProps extends Omit<
   JSX.ButtonHTMLAttributes<HTMLButtonElement>,
   "children"
 > {
-  /** 버튼 크기 */
+  /** Button size */
   size?: "sm" | "lg";
 }
 
 /**
- * 테마 토글 버튼 컴포넌트
+ * Theme toggle button component
  *
  * @remarks
- * - ThemeProvider 내부에서 사용해야 함
- * - 클릭 시 light → system → dark → light 순환
- * - 현재 모드에 맞는 아이콘 표시 (☀️ / 💻 / 🌙)
+ * - Must be used inside ThemeProvider
+ * - Cycles through light → system → dark → light on click
+ * - Shows appropriate icon for current mode (☀️ / 💻 / 🌙)
  *
  * @example
  * ```tsx
- * // 기본 사용
+ * // Basic usage
  * <ThemeToggle />
  *
- * // 크기 조절
+ * // Adjust size
  * <ThemeToggle size="sm" />
  * <ThemeToggle size="lg" />
  * ```

package/src/components/form-control/checkbox/Checkbox.styles.ts

@@ -12,7 +12,7 @@ import { insetBase, insetFocusOutlineSelf } from "../../../styles/patterns.style
 
 export type CheckboxSize = ComponentSize;
 
-// wrapper 기본 스타일
+// wrapper base styles
 export const checkboxBaseClass = clsx(
   "inline-flex items-center gap-2",
   "whitespace-nowrap",
@@ -25,7 +25,7 @@ export const checkboxBaseClass = clsx(
   "focus-visible:ring-2",
 );
 
-// 인디케이터 기본 스타일
+// Indicator base styles
 export const indicatorBaseClass = clsx(
   "flex shrink-0 items-center justify-center",
   "size-4",
@@ -36,10 +36,10 @@ export const indicatorBaseClass = clsx(
   "transition-colors",
 );
 
-// 체크 상태 스타일 (primary 고정)
+// Checked state styles (primary fixed)
 export const checkedClass = clsx("border-primary-500 bg-primary-500", "text-white");
 
-// 사이즈별 스타일
+// Size-specific styles
 export const checkboxSizeClasses: Record<CheckboxSize, string> = {
   xs: clsx("h-field-xs", paddingXs),
   sm: clsx("h-field-sm", paddingSm),
@@ -47,14 +47,14 @@ export const checkboxSizeClasses: Record<CheckboxSize, string> = {
   xl: clsx("h-field-xl", paddingXl),
 };
 
-// inset 스타일
+// Inset styles
 export const checkboxInsetClass = clsx(
   "h-field-inset justify-center bg-transparent",
   insetBase,
   insetFocusOutlineSelf,
 );
 
-// inset 사이즈별 높이 (border 2px 제외)
+// Inset size-specific heights (excluding 2px border)
 export const checkboxInsetSizeHeightClasses: Record<CheckboxSize, string> = {
   xs: "h-field-inset-xs",
   sm: "h-field-inset-sm",
@@ -62,8 +62,8 @@ export const checkboxInsetSizeHeightClasses: Record<CheckboxSize, string> = {
   xl: "h-field-inset-xl",
 };
 
-// inline 스타일
+// Inline styles
 export const checkboxInlineClass = clsx("!h-auto", "!p-0", "gap-1");
 
-// disabled 스타일
+// Disabled styles
 export const checkboxDisabledClass = disabledOpacity;

package/src/components/form-control/checkbox/Checkbox.tsx

@@ -17,7 +17,7 @@ import {
 } from "./Checkbox.styles";
 import { Invalid } from "../Invalid";
 
-// Directive 사용 선언 (TypeScript용)
+// Directive usage declaration (for TypeScript)
 void ripple;
 
 export interface CheckboxProps {
@@ -84,7 +84,7 @@ export const Checkbox: ParentComponent<CheckboxProps> = (props) => {
 
   const errorMsg = createMemo(() => {
     const v = local.value ?? false;
-    if (local.required && !v) return "필수 선택 항목입니다";
+    if (local.required && !v) return "This is a required selection";
     return local.validate?.(v);
   });
 

package/src/components/form-control/checkbox/CheckboxGroup.tsx

@@ -31,7 +31,7 @@ const { Group } = createSelectionGroup({
   mode: "multiple",
   contextName: "CheckboxGroup",
   ItemComponent: Checkbox,
-  emptyErrorMsg: "항목을 선택해 주세요",
+  emptyErrorMsg: "Please select an item",
 });
 
 export const CheckboxGroup = Group as unknown as CheckboxGroupComponent;

package/src/components/form-control/checkbox/Radio.tsx

@@ -18,7 +18,7 @@ import { Invalid } from "../Invalid";
 
 const radioDotClass = clsx("size-2", "rounded-full", "bg-current");
 
-// Directive 사용 선언 (TypeScript용)
+// Directive usage declaration (for TypeScript)
 void ripple;
 
 export interface RadioProps {
@@ -85,7 +85,7 @@ export const Radio: ParentComponent<RadioProps> = (props) => {
 
   const errorMsg = createMemo(() => {
     const v = local.value ?? false;
-    if (local.required && !v) return "필수 선택 항목입니다";
+    if (local.required && !v) return "This is a required selection";
     return local.validate?.(v);
   });
 

package/src/components/form-control/checkbox/RadioGroup.tsx

@@ -31,7 +31,7 @@ const { Group } = createSelectionGroup({
   mode: "single",
   contextName: "RadioGroup",
   ItemComponent: Radio,
-  emptyErrorMsg: "항목을 선택해 주세요",
+  emptyErrorMsg: "Please select an item",
 });
 
 export const RadioGroup = Group as unknown as RadioGroupComponent;