@tipp/ui 2.5.0 → 2.6.0

package/src/atoms/pagination.tsx

@@ -9,6 +9,7 @@ import type { IconButtonProps } from './icon-button';
 import { IconButton } from './icon-button';
 import { Flex } from './flex';
 import { Typo } from './typo';
+import { resolveColor, type UiColor } from '../utils/resolve-color';
 
 export interface PaginationProps {
   /** 현재 선택된 페이지, 1부터 시작. 지정 시 controlled 모드로 동작한다. */
@@ -21,6 +22,8 @@ export interface PaginationProps {
   count?: number;
   /** 표시할 페이지 버튼의 개수 */
   siblingCount?: number;
+  /** 선택된 페이지 강조에 사용할 accent color. black 등 커스텀 color 지원. */
+  color?: UiColor;
 }
 
 export function Pagination(props: PaginationProps): React.ReactNode {
@@ -98,11 +101,27 @@ export function Pagination(props: PaginationProps): React.ReactNode {
   const moveButtonProps: IconButtonProps = {
     variant: 'ghost',
     size: 'large',
-    style: { borderRadius: '50%' },
+    // 숫자 페이지 버튼(40x40)과 동일한 크기·사각(8px) hover 영역으로 통일한다.
+    // (size 'large'는 48x48이라 숫자 버튼보다 커서 width/height를 명시로 덮어쓴다.)
+    style: { width: '40px', height: '40px', borderRadius: '8px' },
   };
 
+  const { color: resolvedColor, className: colorClassName } = resolveColor(
+    props.color
+  );
+
   return (
-    <Flex align="center" className="tipp-pagination">
+    <Flex
+      align="center"
+      // 화살표·숫자 버튼 모든 인접 간격을 숫자 그룹과 동일한 4px(gap "1")로 통일한다.
+      gap="1"
+      className={
+        colorClassName
+          ? `tipp-pagination ${colorClassName}`
+          : 'tipp-pagination'
+      }
+      data-accent-color={resolvedColor}
+    >
       <IconButton
         disabled={!doublePrev}
         onClick={onClickDoublePrev}

package/src/atoms/popover.tsx

@@ -1 +1,37 @@
-export { Popover } from '@radix-ui/themes';
+import { Popover as RadixPopover } from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import { forwardRef, useContext, useMemo } from 'react';
+import { resolveColor, type UiColor } from '../utils/resolve-color';
+import { ThemeAccentContext } from '../theme/theme-provider';
+
+type ContentProps = RadixPopover.ContentProps & {
+  /** Portal 내부에 적용할 color. 미지정 시 theme custom accent(black)를 상속한다. */
+  color?: UiColor;
+};
+
+const Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {
+  const { className, color, ...rest } = props;
+  const themeAccent = useContext(ThemeAccentContext);
+
+  // Content는 Portal(body)로 렌더돼 theme의 className override를 못 받으므로, per-instance color가
+  // 없으면 theme custom accent(black)를 fallback으로 적용해 Portal 안에서도 black을 유지한다.
+  const { className: colorClassName } = useMemo(
+    () => resolveColor(color ?? themeAccent),
+    [color, themeAccent]
+  );
+
+  return (
+    <RadixPopover.Content
+      ref={ref}
+      {...rest}
+      className={clsx(colorClassName, className)}
+    />
+  );
+});
+
+Content.displayName = 'Popover.Content';
+
+export const Popover = {
+  ...RadixPopover,
+  Content,
+};

package/src/atoms/progress.tsx

@@ -1 +1,31 @@
-export { Progress, type ProgressProps } from '@radix-ui/themes';
+import {
+  Progress as RadixProgress,
+  type ProgressProps as RadixProgressProps,
+} from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import React, { forwardRef } from 'react';
+import { resolveColor, type UiColor } from '../utils/resolve-color';
+
+export type ProgressProps = Omit<RadixProgressProps, 'color'> & {
+  color?: UiColor;
+};
+
+export const Progress = forwardRef<
+  React.ComponentRef<typeof RadixProgress>,
+  ProgressProps
+>((props, ref): React.ReactNode => {
+  const { color, className, ...rest } = props;
+
+  const { color: radixColor, className: colorClassName } = resolveColor(color);
+
+  return (
+    <RadixProgress
+      {...rest}
+      className={clsx(colorClassName, className)}
+      color={radixColor}
+      ref={ref}
+    />
+  );
+});
+
+Progress.displayName = 'Progress';

package/src/atoms/radio-cards.tsx

@@ -1 +1,49 @@
-export { RadioCards } from '@radix-ui/themes';
+import { RadioCards as RadixRadioCards } from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import React, { forwardRef, useMemo } from 'react';
+import {
+  resolveColor,
+  type DistributiveOmit,
+  type UiColor,
+} from '../utils/resolve-color';
+
+type RadioCardsRootProps = DistributiveOmit<
+  React.ComponentPropsWithoutRef<typeof RadixRadioCards.Root>,
+  'color'
+> & {
+  color?: UiColor;
+};
+
+const Root = forwardRef<
+  React.ElementRef<typeof RadixRadioCards.Root>,
+  RadioCardsRootProps
+>((props, ref) => {
+  const { color, className, ...rest } = props;
+
+  const { color: radixColor, className: colorClassName } = useMemo(
+    () => resolveColor(color),
+    [color]
+  );
+
+  // custom color(black)는 className의 변수 override만 사용한다. fallback color를 함께 넘기면
+  // RadioCards가 그 color를 자식 Item으로 전파하고, 각 Item이 자기 `data-accent-color`로
+  // gray를 다시 적용해 조상 className override를 자식 스코프에서 덮어버린다.
+  const appliedColor = colorClassName ? undefined : radixColor;
+
+  return (
+    <RadixRadioCards.Root
+      {...rest}
+      className={clsx(colorClassName, className)}
+      color={appliedColor}
+      ref={ref}
+    />
+  );
+});
+
+Root.displayName = 'RadioCards.Root';
+
+export const RadioCards = {
+  ...RadixRadioCards,
+  Root,
+};
+

package/src/atoms/radio-group.tsx

@@ -1 +1,49 @@
-export { RadioGroup } from '@radix-ui/themes';
+import { RadioGroup as RadixRadioGroup } from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import React, { forwardRef, useMemo } from 'react';
+import {
+  resolveColor,
+  type DistributiveOmit,
+  type UiColor,
+} from '../utils/resolve-color';
+
+type RadioGroupRootProps = DistributiveOmit<
+  React.ComponentPropsWithoutRef<typeof RadixRadioGroup.Root>,
+  'color'
+> & {
+  color?: UiColor;
+};
+
+const Root = forwardRef<
+  React.ElementRef<typeof RadixRadioGroup.Root>,
+  RadioGroupRootProps
+>((props, ref) => {
+  const { color, className, ...rest } = props;
+
+  const { color: radixColor, className: colorClassName } = useMemo(
+    () => resolveColor(color),
+    [color]
+  );
+
+  // custom color(black)는 className의 변수 override만 사용한다. fallback color를 함께 넘기면
+  // RadioGroup이 그 color를 자식 Item으로 전파하고, 각 Item이 자기 `data-accent-color`로
+  // gray를 다시 적용해 조상 className override를 자식 스코프에서 덮어버린다.
+  const appliedColor = colorClassName ? undefined : radixColor;
+
+  return (
+    <RadixRadioGroup.Root
+      {...rest}
+      className={clsx(colorClassName, className)}
+      color={appliedColor}
+      ref={ref}
+    />
+  );
+});
+
+Root.displayName = 'RadioGroup.Root';
+
+export const RadioGroup = {
+  ...RadixRadioGroup,
+  Root,
+};
+

package/src/atoms/radio.tsx

@@ -1 +1,31 @@
-export { Radio, type RadioProps } from '@radix-ui/themes';
+import {
+  Radio as RadixRadio,
+  type RadioProps as RadixRadioProps,
+} from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import React, { forwardRef } from 'react';
+import { resolveColor, type UiColor } from '../utils/resolve-color';
+
+export type RadioProps = Omit<RadixRadioProps, 'color'> & {
+  color?: UiColor;
+};
+
+export const Radio = forwardRef<
+  React.ComponentRef<typeof RadixRadio>,
+  RadioProps
+>((props, ref): React.ReactNode => {
+  const { color, className, ...rest } = props;
+
+  const { color: radixColor, className: colorClassName } = resolveColor(color);
+
+  return (
+    <RadixRadio
+      {...rest}
+      className={clsx(colorClassName, className)}
+      color={radixColor}
+      ref={ref}
+    />
+  );
+});
+
+Radio.displayName = 'Radio';

package/src/atoms/segmented-control.tsx

@@ -1 +1,4 @@
+// SegmentedControl은 Radix가 의도적으로 중립(gray/surface) 디자인으로 만들어 accent 변수를
+// 전혀 쓰지 않는다. 따라서 black 등 accent override가 무효과(no-op)라 color를 노출하지 않고
+// 순수 re-export를 유지한다. (color가 필요하면 Radix 차원의 디자인 변경이 선행돼야 함)
 export { SegmentedControl } from '@radix-ui/themes';

package/src/atoms/select.tsx

@@ -1,60 +1,108 @@
 import { Select as RadixSelect } from '@radix-ui/themes';
+import { clsx } from 'clsx';
 import { createContext, forwardRef, useContext, useMemo } from 'react';
+import {
+  resolveColor,
+  type DistributiveOmit,
+  type UiColor,
+} from '../utils/resolve-color';
+import { ThemeAccentContext } from '../theme/theme-provider';
 
-const SelectContext = createContext<{ error?: boolean }>({
+const SelectContext = createContext<{ error?: boolean; color?: UiColor }>({
   error: false,
 });
 
-export type ContentProps = RadixSelect.ContentProps & {
+export type ContentProps = DistributiveOmit<
+  RadixSelect.ContentProps,
+  'color'
+> & {
   isNavigation?: boolean;
+  color?: UiColor;
 };
 
 const Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {
-  const { className, isNavigation, ...rest } = props;
-  const { error } = useContext(SelectContext);
+  const { className, isNavigation, color, ...rest } = props;
+  const { error, color: contextColor } = useContext(SelectContext);
+  const themeAccent = useContext(ThemeAccentContext);
+
+  // Content는 Portal로 렌더돼 theme의 className override를 못 받으므로, per-instance/Root color가
+  // 없으면 theme custom accent(black)를 fallback으로 적용해 Portal 안에서도 black을 유지한다.
+  const { color: radixColor, className: colorClassName } = useMemo(
+    () => resolveColor(color ?? contextColor ?? themeAccent),
+    [color, contextColor, themeAccent]
+  );
+
+  // custom color(black)는 className override만 사용 — fallback color를 함께 넘기면 자식 Item이
+  // 자기 data-accent-color로 gray를 다시 적용해 override를 덮는다.
+  const appliedColor = colorClassName ? undefined : radixColor;
 
   const cls = useMemo(() => {
     const etc = isNavigation ? 'nav-select' : '';
     const errorCls = error ? 'tipp-error' : '';
-    return [etc, errorCls, className].join(' ');
-  }, [className, error, isNavigation]);
+    return clsx(etc, errorCls, colorClassName, className);
+  }, [className, colorClassName, error, isNavigation]);
 
   return (
     <RadixSelect.Content
       position="popper"
       {...rest}
       className={cls}
+      color={appliedColor}
       ref={ref}
     />
   );
 });
 Content.displayName = 'Select.Content';
 
-const Trigger = forwardRef<HTMLButtonElement, RadixSelect.TriggerProps>(
-  (props, ref) => {
-    const { className, ...rest } = props;
-    const { error } = useContext(SelectContext);
+export type TriggerProps = DistributiveOmit<
+  RadixSelect.TriggerProps,
+  'color'
+> & {
+  color?: UiColor;
+};
 
-    const cls = useMemo(() => {
-      const errorCls = error ? 'error' : '';
-      return [errorCls, className].join(' ');
-    }, [className, error]);
+const Trigger = forwardRef<HTMLButtonElement, TriggerProps>((props, ref) => {
+  const { className, color, ...rest } = props;
+  const { error, color: contextColor } = useContext(SelectContext);
 
-    return <RadixSelect.Trigger {...rest} className={cls} ref={ref} />;
-  }
-);
+  const { color: radixColor, className: colorClassName } = useMemo(
+    () => resolveColor(color ?? contextColor),
+    [color, contextColor]
+  );
+
+  // custom color(black)는 className override만 사용 (위 Content와 동일 이유).
+  const appliedColor = colorClassName ? undefined : radixColor;
+
+  const cls = useMemo(() => {
+    const errorCls = error ? 'error' : '';
+    return clsx(errorCls, colorClassName, className);
+  }, [className, colorClassName, error]);
+
+  return (
+    <RadixSelect.Trigger
+      {...rest}
+      className={cls}
+      color={appliedColor}
+      ref={ref}
+    />
+  );
+});
 
 Trigger.displayName = 'Select.Trigger';
 
 export type SelectRootProps = RadixSelect.RootProps & {
   error?: boolean;
+  /** Trigger·Content에 일괄 적용할 color. 각 파트에서 color prop으로 개별 override 가능. */
+  color?: UiColor;
 };
 
 function Root(props: SelectRootProps): React.ReactNode {
-  const { error, ...rest } = props;
+  const { error, color, ...rest } = props;
+
+  const value = useMemo(() => ({ error, color }), [error, color]);
 
   return (
-    <SelectContext.Provider value={{ error }}>
+    <SelectContext.Provider value={value}>
       <RadixSelect.Root {...rest} />
     </SelectContext.Provider>
   );

package/src/atoms/switch.tsx

@@ -1 +1,31 @@
-export { Switch, type SwitchProps } from '@radix-ui/themes';
+import {
+  Switch as RadixSwitch,
+  type SwitchProps as RadixSwitchProps,
+} from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import React, { forwardRef } from 'react';
+import { resolveColor, type UiColor } from '../utils/resolve-color';
+
+export type SwitchProps = Omit<RadixSwitchProps, 'color'> & {
+  color?: UiColor;
+};
+
+export const Switch = forwardRef<
+  React.ComponentRef<typeof RadixSwitch>,
+  SwitchProps
+>((props, ref): React.ReactNode => {
+  const { color, className, ...rest } = props;
+
+  const { color: radixColor, className: colorClassName } = resolveColor(color);
+
+  return (
+    <RadixSwitch
+      {...rest}
+      className={clsx(colorClassName, className)}
+      color={radixColor}
+      ref={ref}
+    />
+  );
+});
+
+Switch.displayName = 'Switch';

package/src/atoms/tab-nav.tsx

@@ -1 +1,42 @@
-export { TabNav } from '@radix-ui/themes';
+import { TabNav as RadixTabNav } from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import React, { forwardRef, useMemo } from 'react';
+import { resolveColor, type UiColor } from '../utils/resolve-color';
+
+type TabNavRootProps = React.ComponentPropsWithoutRef<
+  typeof RadixTabNav.Root
+> & {
+  /**
+   * TabNav는 Radix color prop이 없어 per-instance로는 custom accent(black 등)만
+   * className override로 적용된다. semantic/radix color는 theme accent로만 가능.
+   */
+  color?: UiColor;
+};
+
+const Root = forwardRef<
+  React.ElementRef<typeof RadixTabNav.Root>,
+  TabNavRootProps
+>((props, ref) => {
+  const { color, className, ...rest } = props;
+
+  const { className: colorClassName } = useMemo(
+    () => resolveColor(color),
+    [color]
+  );
+
+  return (
+    <RadixTabNav.Root
+      {...rest}
+      className={clsx(colorClassName, className)}
+      ref={ref}
+    />
+  );
+});
+
+Root.displayName = 'TabNav.Root';
+
+export const TabNav = {
+  ...RadixTabNav,
+  Root,
+};
+

package/src/atoms/tabs.tsx

@@ -1 +1,40 @@
-export { Tabs } from '@radix-ui/themes';
+import { Tabs as RadixTabs } from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import React, { forwardRef, useMemo } from 'react';
+import { resolveColor, type UiColor } from '../utils/resolve-color';
+
+type TabsRootProps = React.ComponentPropsWithoutRef<typeof RadixTabs.Root> & {
+  /**
+   * Tabs는 Radix color prop이 없지만 active 인디케이터(`.rt-BaseTabListTrigger::before`)가
+   * `--accent-indicator`를 사용하므로, Root className override로 custom accent(black 등)를
+   * per-instance 적용할 수 있다. semantic/radix color는 theme accent로만 가능.
+   */
+  color?: UiColor;
+};
+
+const Root = forwardRef<
+  React.ElementRef<typeof RadixTabs.Root>,
+  TabsRootProps
+>((props, ref) => {
+  const { color, className, ...rest } = props;
+
+  const { className: colorClassName } = useMemo(
+    () => resolveColor(color),
+    [color]
+  );
+
+  return (
+    <RadixTabs.Root
+      {...rest}
+      className={clsx(colorClassName, className)}
+      ref={ref}
+    />
+  );
+});
+
+Root.displayName = 'Tabs.Root';
+
+export const Tabs = {
+  ...RadixTabs,
+  Root,
+};

package/src/atoms/tooltip.tsx

@@ -3,8 +3,11 @@ import {
   Tooltip as RadixTooltip,
   type TooltipProps as RadixTooltipProps,
 } from '@radix-ui/themes';
-import { useCallback, useState } from 'react';
+import { clsx } from 'clsx';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { useUIState } from '@/context/ui-state-provider';
+import { resolveColor } from '../utils/resolve-color';
+import { ThemeAccentContext } from '../theme/theme-provider';
 
 export function Tooltip({
   children,
@@ -12,6 +15,15 @@ export function Tooltip({
 }: RadixTooltipProps): React.ReactElement {
   const { isMobile } = useUIState();
   const [open, setOpen] = useState<boolean>(props.defaultOpen ?? false);
+  const themeAccent = useContext(ThemeAccentContext);
+
+  // Content는 Portal(body)로 렌더돼 theme의 className override를 못 받으므로, theme custom
+  // accent(black)를 className으로 다시 적용해 Portal 안에서도 black을 유지한다.
+  // (RadixTooltip의 className은 Content에 적용됨)
+  const accentClassName = useMemo(
+    () => resolveColor(themeAccent).className,
+    [themeAccent]
+  );
 
   const onOpenChange = useCallback(
     (e: boolean) => {
@@ -36,6 +48,7 @@ export function Tooltip({
       onOpenChange={onOpenChange}
       open={open}
       {...props}
+      className={clsx(accentClassName, props.className)}
     >
       <Box asChild onClick={onClick}>
         {children}

package/src/atoms/typo.tsx

@@ -1,16 +1,28 @@
 import type { TextProps as RadixTextProps } from '@radix-ui/themes';
 import type { Responsive } from '@radix-ui/themes/props';
 import { Text as RadixText } from '@radix-ui/themes';
+import { clsx } from 'clsx';
 import React, { useMemo, forwardRef } from 'react';
 import { mapWithResponsive } from '@/utils/map-with-responsive';
+import {
+  resolveColor,
+  type DistributiveOmit,
+  type UiColor,
+} from '../utils/resolve-color';
 
-export type TypoProps = RadixTextProps & {
+export type TypoProps = DistributiveOmit<RadixTextProps, 'color'> & {
   variant?: Responsive<'body' | 'caption' | 'subtitle'>;
+  color?: UiColor;
 };
 
 export const Typo = forwardRef<HTMLSpanElement, TypoProps>(
   (props: TypoProps, ref): React.ReactNode => {
-    const { size, variant, children, ...rest } = props;
+    const { size, variant, children, color, className, ...rest } = props;
+
+    const { color: radixColor, className: colorClassName } = useMemo(
+      () => resolveColor(color),
+      [color]
+    );
 
     const radixSize = useMemo<RadixTextProps['size']>(() => {
       if (size !== undefined) return size;
@@ -34,7 +46,13 @@ export const Typo = forwardRef<HTMLSpanElement, TypoProps>(
     }, [size, variant]);
 
     return (
-      <RadixText {...rest} ref={ref} size={radixSize}>
+      <RadixText
+        {...rest}
+        className={clsx(colorClassName, className)}
+        color={radixColor}
+        ref={ref}
+        size={radixSize}
+      >
         {children}
       </RadixText>
     );

package/src/molecules/radio-button-card.tsx

@@ -5,18 +5,20 @@ import React, {
   useState,
   Fragment,
 } from 'react';
+// 값(컴포넌트)은 @tipp/ui 래퍼, 타입(RootProps/ItemProps)은 Radix 네임스페이스에서 직접 가져온다.
+import type { RadioCards as RadioCardsTypes } from '@radix-ui/themes';
 import { RadioCards } from '@/atoms/radio-cards';
 import { Flex } from '@/atoms/flex';
 import { Radio } from '@/atoms/radio';
 import type { FlexProps } from '@/atoms/flex';
 
-type RadioButtonCardRootProps = RadioCards.RootProps & {
+type RadioButtonCardRootProps = RadioCardsTypes.RootProps & {
   justify?: FlexProps['justify'];
   RadioWrapper?: React.FC;
 };
 const RadioCardContext = createContext<RadioButtonCardRootProps>({});
 
-function Root(props: RadioCards.RootProps): React.ReactNode {
+function Root(props: RadioCardsTypes.RootProps): React.ReactNode {
   const [value, setValue] = useState(props.value || props.defaultValue);
 
   const onValueChange = useCallback(
@@ -34,11 +36,11 @@ function Root(props: RadioCards.RootProps): React.ReactNode {
   );
 }
 
-type RadioButtonCardItemProps = RadioCards.ItemProps;
+type RadioButtonCardItemProps = RadioCardsTypes.ItemProps;
 function Item({
   children,
   ...itemRest
-}: RadioCards.ItemProps): React.ReactNode {
+}: RadioCardsTypes.ItemProps): React.ReactNode {
   const {
     value,
     justify,

package/src/theme/theme-provider.tsx

@@ -1,12 +1,47 @@
-import React from 'react';
+import React, { createContext } from 'react';
 import { Theme } from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import { resolveColor, type UiColor } from '../utils/resolve-color';
 
 type ThemeProps = React.ComponentProps<typeof Theme>;
 
-export interface ThemeProviderProps extends ThemeProps {
+/**
+ * 테마 전역 primary가 custom color(black 등)일 때 그 값을 하위로 전달하는 context.
+ * Radix는 Portal 컨텐츠(Select 드롭다운 등)에 theme의 accentColor "값"(여기선 fallback gray)만
+ * 복제하고 `.tipp-accent-black` className은 복제하지 않으므로, Portal 안에서는 accent override가
+ * 사라진다. 래핑된 overlay 컴포넌트(Select 등)가 이 context를 최하위 fallback color로 읽어
+ * 자기 요소에 className을 직접 부여하면 Portal 내부에서도 black이 유지된다.
+ * (custom accent가 아닐 때는 undefined — Radix 네이티브 portal 상속에 맡긴다.)
+ */
+export const ThemeAccentContext = createContext<UiColor | undefined>(undefined);
+
+export interface ThemeProviderProps extends Omit<ThemeProps, 'accentColor'> {
   children: React.ReactNode;
+  /**
+   * 전역 primary(accent) color. Radix accent color에 더해 커스텀 `black`을 지원한다.
+   * black이면 Radix에는 fallback `gray`를 넘기고 Theme 루트에 accent override
+   * className을 부여하여 하위 컴포넌트가 color prop 없이도 black을 상속한다.
+   */
+  accentColor?: ThemeProps['accentColor'] | 'black';
 }
 
 export function ThemeProvider(props: ThemeProviderProps): React.ReactNode {
-  return <Theme accentColor="iris" radius="medium" {...props} />;
+  const { accentColor = 'iris', className, ...rest } = props;
+
+  const { color: radixAccent, className: accentClassName } =
+    resolveColor(accentColor);
+
+  // custom accent(className이 생기는 경우 = black)일 때만 Portal 보정용으로 context에 흘린다.
+  const themeAccent = accentClassName ? accentColor : undefined;
+
+  return (
+    <ThemeAccentContext.Provider value={themeAccent}>
+      <Theme
+        accentColor={radixAccent ?? 'iris'}
+        className={clsx(accentClassName, className)}
+        radius="medium"
+        {...rest}
+      />
+    </ThemeAccentContext.Provider>
+  );
 }