@amityco/react-native-social-uikit 4.1.1-fdf83f6b.0 → 4.2.0

package/src/core/design/atoms/Button/styles.ts

@@ -1,309 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { useToken, type ColorTokenRef } from '../../theme/useToken';
-import { AmityColorToken } from '../../tokens/amity-color-tokens';
-import type { ButtonHierarchy, ButtonSize, ButtonTone } from './Button';
-
-// ── Geometry: SoT geometry.json → button.main ──
-// label sizes lg {15/20} sm {13/18}; iconGlyph 16; weight 590 → RN '600'.
-// Tertiary uses paddingH_tertiary (4) but keeps full height + paddingV (ghost-like,
-// NOT link-like). Border width 0.0625rem = 1px.
-const GEOMETRY = {
-  lg: {
-    height: 40,
-    paddingV: 10,
-    paddingH: 12,
-    paddingHTertiary: 4,
-    radius: 8,
-    fontSize: 15,
-    lineHeight: 20,
-    gap: 8,
-  },
-  sm: {
-    height: 28,
-    paddingV: 4,
-    paddingH: 8,
-    paddingHTertiary: 4,
-    radius: 6,
-    fontSize: 13,
-    lineHeight: 18,
-    gap: 4,
-  },
-} as const;
-
-const ICON_GLYPH = 16;
-const BORDER_WIDTH = 1;
-const FONT_WEIGHT = '600' as const;
-
-export type ButtonVisualState = 'enabled' | 'pressed' | 'disabled';
-
-// A token slice for one visual state. `surface`/`border` are optional because
-// ghost/link tones have no resting surface or border token (transparent at rest;
-// ghost gains a surface only on hover/press).
-type StateTokens = {
-  surface?: ColorTokenRef;
-  border?: ColorTokenRef;
-  text: ColorTokenRef;
-  icon: ColorTokenRef;
-};
-
-type ToneSlice = Record<ButtonVisualState, StateTokens>;
-
-// (hierarchy, tone) → token slice, resolving to the web MainButton token model
-// (color × styleType × tokenHierarchy). Every name below is grep-confirmed to exist
-// in amity-color-tokens.ts. RN has no hover, so `pressed` reuses the web Hover slice
-// for the transparent/ghost styles (outlined/ghost/link) — where the resting surface
-// is transparent and the Hover token is the intended touch affordance.
-//
-// EXCEPTION (filled/primary): web's Main.module.css defines NO `:active`/`[data-pressed]`
-// rule for filled buttons — only `[data-hovered]` (a desktop-mouse hover). On an actual
-// press/tap the filled surface does NOT change. Reusing the Hover slice here made the
-// primary/save button shift to the lighter `primary_shade1` blue on tap, which web never
-// shows. So filled/primary `pressed` mirrors `enabled` (surface/border/text/icon all
-// unchanged on press), matching web's real active-state behaviour.
-const SLICES: Partial<Record<`${ButtonHierarchy}-${ButtonTone}`, ToneSlice>> = {
-  // Primary → Filled / Primary
-  'primary-default': {
-    enabled: {
-      surface: AmityColorToken.SurfaceMainButtonDefaultFilledPrimaryEnabled,
-      border: AmityColorToken.BorderMainButtonDefaultFilledPrimaryEnabled,
-      text: AmityColorToken.TextMainButtonDefaultFilledPrimaryEnabled,
-      icon: AmityColorToken.IconMainButtonDefaultFilledPrimaryEnabled,
-    },
-    // Filled has no web press state → keep the enabled surface on press.
-    pressed: {
-      surface: AmityColorToken.SurfaceMainButtonDefaultFilledPrimaryEnabled,
-      border: AmityColorToken.BorderMainButtonDefaultFilledPrimaryEnabled,
-      text: AmityColorToken.TextMainButtonDefaultFilledPrimaryEnabled,
-      icon: AmityColorToken.IconMainButtonDefaultFilledPrimaryEnabled,
-    },
-    disabled: {
-      surface: AmityColorToken.SurfaceMainButtonDefaultFilledPrimaryDisabled,
-      border: AmityColorToken.BorderMainButtonDefaultFilledPrimaryDisabled,
-      text: AmityColorToken.TextMainButtonDefaultFilledPrimaryDisabled,
-      icon: AmityColorToken.IconMainButtonDefaultFilledPrimaryDisabled,
-    },
-  },
-  'primary-destructive': {
-    enabled: {
-      surface: AmityColorToken.SurfaceMainButtonDestructiveFilledPrimaryEnabled,
-      border: AmityColorToken.BorderMainButtonDestructiveFilledPrimaryEnabled,
-      text: AmityColorToken.TextMainButtonDestructiveFilledPrimaryEnabled,
-      icon: AmityColorToken.IconMainButtonDestructiveFilledPrimaryEnabled,
-    },
-    // Filled has no web press state → keep the enabled surface on press.
-    pressed: {
-      surface: AmityColorToken.SurfaceMainButtonDestructiveFilledPrimaryEnabled,
-      border: AmityColorToken.BorderMainButtonDestructiveFilledPrimaryEnabled,
-      text: AmityColorToken.TextMainButtonDestructiveFilledPrimaryEnabled,
-      icon: AmityColorToken.IconMainButtonDestructiveFilledPrimaryEnabled,
-    },
-    disabled: {
-      surface:
-        AmityColorToken.SurfaceMainButtonDestructiveFilledPrimaryDisabled,
-      border: AmityColorToken.BorderMainButtonDestructiveFilledPrimaryDisabled,
-      text: AmityColorToken.TextMainButtonDestructiveFilledPrimaryDisabled,
-      icon: AmityColorToken.IconMainButtonDestructiveFilledPrimaryDisabled,
-    },
-  },
-
-  // Secondary → Outlined / Primary (transparent surface + border)
-  'secondary-default': {
-    enabled: {
-      surface: AmityColorToken.SurfaceMainButtonDefaultOutlinedPrimaryEnabled,
-      border: AmityColorToken.BorderMainButtonDefaultOutlinedPrimaryEnabled,
-      text: AmityColorToken.TextMainButtonDefaultOutlinedPrimaryEnabled,
-      icon: AmityColorToken.IconMainButtonDefaultOutlinedPrimaryEnabled,
-    },
-    pressed: {
-      surface: AmityColorToken.SurfaceMainButtonDefaultOutlinedPrimaryHover,
-      border: AmityColorToken.BorderMainButtonDefaultOutlinedPrimaryHover,
-      text: AmityColorToken.TextMainButtonDefaultOutlinedPrimaryHover,
-      icon: AmityColorToken.IconMainButtonDefaultOutlinedPrimaryHover,
-    },
-    disabled: {
-      surface: AmityColorToken.SurfaceMainButtonDefaultOutlinedPrimaryDisabled,
-      border: AmityColorToken.BorderMainButtonDefaultOutlinedPrimaryDisabled,
-      text: AmityColorToken.TextMainButtonDefaultOutlinedPrimaryDisabled,
-      icon: AmityColorToken.IconMainButtonDefaultOutlinedPrimaryDisabled,
-    },
-  },
-  'secondary-destructive': {
-    enabled: {
-      surface:
-        AmityColorToken.SurfaceMainButtonDestructiveOutlinedPrimaryEnabled,
-      border: AmityColorToken.BorderMainButtonDestructiveOutlinedPrimaryEnabled,
-      text: AmityColorToken.TextMainButtonDestructiveOutlinedPrimaryEnabled,
-      icon: AmityColorToken.IconMainButtonDestructiveOutlinedPrimaryEnabled,
-    },
-    pressed: {
-      surface: AmityColorToken.SurfaceMainButtonDestructiveOutlinedPrimaryHover,
-      border: AmityColorToken.BorderMainButtonDestructiveOutlinedPrimaryHover,
-      text: AmityColorToken.TextMainButtonDestructiveOutlinedPrimaryHover,
-      icon: AmityColorToken.IconMainButtonDestructiveOutlinedPrimaryHover,
-    },
-    disabled: {
-      surface:
-        AmityColorToken.SurfaceMainButtonDestructiveOutlinedPrimaryDisabled,
-      border:
-        AmityColorToken.BorderMainButtonDestructiveOutlinedPrimaryDisabled,
-      text: AmityColorToken.TextMainButtonDestructiveOutlinedPrimaryDisabled,
-      icon: AmityColorToken.IconMainButtonDestructiveOutlinedPrimaryDisabled,
-    },
-  },
-  // Secondary / Inverse → Inverse / Primary (extension)
-  'secondary-inverse': {
-    enabled: {
-      surface: AmityColorToken.SurfaceMainButtonDefaultInversePrimaryEnabled,
-      border: AmityColorToken.BorderMainButtonDefaultInversePrimaryEnabled,
-      text: AmityColorToken.TextMainButtonDefaultInversePrimaryEnabled,
-      icon: AmityColorToken.IconMainButtonDefaultInversePrimaryEnabled,
-    },
-    pressed: {
-      surface: AmityColorToken.SurfaceMainButtonDefaultInversePrimaryHover,
-      border: AmityColorToken.BorderMainButtonDefaultInversePrimaryHover,
-      text: AmityColorToken.TextMainButtonDefaultInversePrimaryHover,
-      icon: AmityColorToken.IconMainButtonDefaultInversePrimaryHover,
-    },
-    disabled: {
-      surface: AmityColorToken.SurfaceMainButtonDefaultInversePrimaryDisabled,
-      border: AmityColorToken.BorderMainButtonDefaultInversePrimaryDisabled,
-      text: AmityColorToken.TextMainButtonDefaultInversePrimaryDisabled,
-      icon: AmityColorToken.IconMainButtonDefaultInversePrimaryDisabled,
-    },
-  },
-
-  // Tertiary → Ghost / Primary (no resting surface/border; surface only on press)
-  'tertiary-default': {
-    enabled: {
-      text: AmityColorToken.TextMainButtonDefaultGhostPrimaryEnabled,
-      icon: AmityColorToken.IconMainButtonDefaultGhostPrimaryEnabled,
-    },
-    pressed: {
-      surface: AmityColorToken.SurfaceMainButtonDefaultGhostPrimaryHover,
-      border: AmityColorToken.BorderMainButtonDefaultGhostPrimaryHover,
-      text: AmityColorToken.TextMainButtonDefaultGhostPrimaryHover,
-      icon: AmityColorToken.IconMainButtonDefaultGhostPrimaryHover,
-    },
-    disabled: {
-      text: AmityColorToken.TextMainButtonDefaultGhostPrimaryDisabled,
-      icon: AmityColorToken.IconMainButtonDefaultGhostPrimaryDisabled,
-    },
-  },
-  'tertiary-destructive': {
-    enabled: {
-      text: AmityColorToken.TextMainButtonDestructiveGhostPrimaryEnabled,
-      icon: AmityColorToken.IconMainButtonDestructiveGhostPrimaryEnabled,
-    },
-    pressed: {
-      surface: AmityColorToken.SurfaceMainButtonDestructiveGhostPrimaryHover,
-      border: AmityColorToken.BorderMainButtonDestructiveGhostPrimaryHover,
-      text: AmityColorToken.TextMainButtonDestructiveGhostPrimaryHover,
-      icon: AmityColorToken.IconMainButtonDestructiveGhostPrimaryHover,
-    },
-    disabled: {
-      text: AmityColorToken.TextMainButtonDestructiveGhostPrimaryDisabled,
-      icon: AmityColorToken.IconMainButtonDestructiveGhostPrimaryDisabled,
-    },
-  },
-  // Tertiary / Brand → Link / Primary (brand-colored text; ghost geometry) (extension)
-  'tertiary-brand': {
-    enabled: {
-      text: AmityColorToken.TextMainButtonDefaultLinkPrimaryEnabled,
-      icon: AmityColorToken.IconMainButtonDefaultLinkPrimaryEnabled,
-    },
-    pressed: {
-      text: AmityColorToken.TextMainButtonDefaultLinkPrimaryHover,
-      icon: AmityColorToken.IconMainButtonDefaultLinkPrimaryHover,
-    },
-    disabled: {
-      text: AmityColorToken.TextMainButtonDefaultLinkPrimaryDisabled,
-      icon: AmityColorToken.IconMainButtonDefaultLinkPrimaryDisabled,
-    },
-  },
-  // Tertiary / Subtle → Ghost / Secondary (muted text) (extension)
-  'tertiary-subtle': {
-    enabled: {
-      text: AmityColorToken.TextMainButtonDefaultGhostSecondaryEnabled,
-      icon: AmityColorToken.IconMainButtonDefaultGhostSecondaryEnabled,
-    },
-    pressed: {
-      surface: AmityColorToken.SurfaceMainButtonDefaultGhostSecondaryHover,
-      border: AmityColorToken.BorderMainButtonDefaultGhostSecondaryHover,
-      text: AmityColorToken.TextMainButtonDefaultGhostSecondaryHover,
-      icon: AmityColorToken.IconMainButtonDefaultGhostSecondaryHover,
-    },
-    disabled: {
-      text: AmityColorToken.TextMainButtonDefaultGhostSecondaryDisabled,
-      icon: AmityColorToken.IconMainButtonDefaultGhostSecondaryDisabled,
-    },
-  },
-  // Note: tertiary-inverse has no clean token (Inverse styleType is filled-surface,
-  // the tertiary/inverse spec is transparent text-only) — deferred. Falls back to
-  // tertiary-default below.
-};
-
-export type ResolvedState = {
-  backgroundColor: string;
-  borderColor: string;
-  textColor: string;
-  iconColor: string;
-};
-
-export type ButtonPalette = Record<ButtonVisualState, ResolvedState>;
-
-export const useStyles = (
-  hierarchy: ButtonHierarchy,
-  tone: ButtonTone,
-  size: ButtonSize,
-  iconOnly: boolean,
-  fullWidth: boolean
-) => {
-  const token = useToken();
-  const g = GEOMETRY[size];
-
-  const slice =
-    SLICES[`${hierarchy}-${tone}`] ??
-    SLICES[`${hierarchy}-default`] ??
-    SLICES['primary-default']!;
-
-  const resolveState = (state: ButtonVisualState): ResolvedState => {
-    const s = slice[state];
-    return {
-      backgroundColor: s.surface ? token(s.surface) : 'transparent',
-      borderColor: s.border ? token(s.border) : 'transparent',
-      textColor: token(s.text),
-      iconColor: token(s.icon),
-    };
-  };
-
-  const palette: ButtonPalette = {
-    enabled: resolveState('enabled'),
-    pressed: resolveState('pressed'),
-    disabled: resolveState('disabled'),
-  };
-
-  const paddingH = hierarchy === 'tertiary' ? g.paddingHTertiary : g.paddingH;
-
-  const styles = StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: g.gap,
-      height: g.height,
-      borderRadius: g.radius,
-      borderWidth: BORDER_WIDTH,
-      paddingVertical: g.paddingV,
-      paddingHorizontal: iconOnly ? g.paddingV : paddingH,
-      width: iconOnly ? g.height : fullWidth ? '100%' : undefined,
-      alignSelf: fullWidth && !iconOnly ? 'stretch' : 'flex-start',
-    },
-    label: {
-      fontSize: g.fontSize,
-      lineHeight: g.lineHeight,
-      fontWeight: FONT_WEIGHT,
-    },
-  });
-
-  return { styles, palette, iconGlyph: ICON_GLYPH };
-};

package/src/core/design/atoms/Divider/Divider.tsx

@@ -1,37 +0,0 @@
-// Divider atom — ported from AmityUiKitWeb core/design/atoms/Divider.
-// Hairline separator (1px, from SoT divider geometry), variant-tinted via a line token.
-
-import { View, Text } from 'react-native';
-import { useStyles } from './styles';
-
-export type DividerVariant = 'content' | 'post';
-export type DividerOrientation = 'horizontal' | 'vertical';
-
-export type DividerProps = {
-  variant?: DividerVariant;
-  orientation?: DividerOrientation;
-  inset?: boolean;
-  label?: string;
-};
-
-export function Divider({
-  variant = 'post',
-  orientation = 'horizontal',
-  inset,
-  label,
-}: DividerProps) {
-  const resolvedInset = inset ?? variant === 'content';
-  const { styles } = useStyles(variant, orientation, resolvedInset);
-
-  if (label) {
-    return (
-      <View style={styles.labeled} accessibilityRole="none">
-        <View style={styles.line} />
-        <Text style={styles.label}>{label}</Text>
-        <View style={styles.line} />
-      </View>
-    );
-  }
-
-  return <View style={styles.divider} accessibilityRole="none" />;
-}

package/src/core/design/atoms/Divider/index.ts

@@ -1,6 +0,0 @@
-export { Divider } from './Divider';
-export type {
-  DividerProps,
-  DividerVariant,
-  DividerOrientation,
-} from './Divider';

package/src/core/design/atoms/Divider/styles.ts

@@ -1,44 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../theme/useToken';
-import { AmityColorToken } from '../../tokens/amity-color-tokens';
-import type { DividerOrientation, DividerVariant } from './Divider';
-
-// Hairline thickness = 1 (SoT geometry.divider.types[].thickness). Label font 13px (web 0.8125rem).
-export const useStyles = (
-  variant: DividerVariant,
-  orientation: DividerOrientation,
-  inset: boolean
-) => {
-  const token = useToken();
-  const lineColor = token(
-    variant === 'content'
-      ? AmityColorToken.LineDividerContentDefault
-      : AmityColorToken.LineDividerPostDefault
-  );
-
-  const bar =
-    orientation === 'horizontal'
-      ? {
-          height: 1,
-          width: inset ? ('auto' as const) : ('100%' as const),
-          marginHorizontal: inset ? 16 : 0,
-        }
-      : {
-          width: 1,
-          height: inset ? ('auto' as const) : ('100%' as const),
-          marginVertical: inset ? 16 : 0,
-        };
-
-  const styles = StyleSheet.create({
-    divider: { backgroundColor: lineColor, ...bar },
-    labeled: { flexDirection: 'row', alignItems: 'center', gap: 8 },
-    line: { flex: 1, height: 1, backgroundColor: lineColor },
-    label: {
-      flexShrink: 0,
-      fontSize: 13,
-      color: token(AmityColorToken.TextDividerDefault),
-    },
-  });
-
-  return { styles };
-};

package/src/core/design/atoms/Input/Boxed/Boxed.tsx

@@ -1,97 +0,0 @@
-// Boxed input atom — ported from AmityUiKitWeb core/design/atoms/Input/Boxed.
-// A filled container field (pill / square / rounded) with optional leading and
-// trailing icons. Web's :focus-within cascade becomes explicit focus state.
-
-import { useState, type ReactNode } from 'react';
-import { TextInput, View } from 'react-native';
-import {
-  useStyles,
-  type BoxedSize,
-  type BoxedState,
-  type BoxedVariant,
-} from './styles';
-
-export type { BoxedSize, BoxedVariant } from './styles';
-
-export type BoxedProps = {
-  value?: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  leadingIcon?: ReactNode;
-  trailingIcon?: ReactNode;
-  size?: BoxedSize;
-  variant?: BoxedVariant;
-  maxLength?: number;
-  multiline?: boolean;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  onSubmit?: (value: string) => void;
-  accessibilityLabel?: string;
-};
-
-export function Boxed({
-  value,
-  onChange,
-  placeholder,
-  leadingIcon,
-  trailingIcon,
-  size = 'medium',
-  variant = 'pill',
-  maxLength,
-  multiline = false,
-  isDisabled = false,
-  isInvalid = false,
-  onFocus,
-  onBlur,
-  onSubmit,
-  accessibilityLabel,
-}: BoxedProps) {
-  const [isFocused, setIsFocused] = useState(false);
-
-  const state: BoxedState = isDisabled
-    ? 'disabled'
-    : isInvalid
-    ? 'invalid'
-    : isFocused
-    ? 'focused'
-    : 'enabled';
-
-  const { styles, placeholderColor, cursorColor } = useStyles({
-    state,
-    size,
-    variant,
-    filled: !!value,
-    multiline,
-  });
-
-  return (
-    <View style={styles.boxed}>
-      {leadingIcon ? <View style={styles.icon}>{leadingIcon}</View> : null}
-      <TextInput
-        style={styles.input}
-        value={value}
-        onChangeText={onChange}
-        placeholder={placeholder}
-        placeholderTextColor={placeholderColor}
-        selectionColor={cursorColor}
-        cursorColor={cursorColor}
-        maxLength={maxLength}
-        multiline={multiline}
-        editable={!isDisabled}
-        accessibilityLabel={accessibilityLabel}
-        onFocus={() => {
-          setIsFocused(true);
-          onFocus?.();
-        }}
-        onBlur={() => {
-          setIsFocused(false);
-          onBlur?.();
-        }}
-        onSubmitEditing={() => onSubmit?.(value ?? '')}
-      />
-      {trailingIcon ? <View style={styles.icon}>{trailingIcon}</View> : null}
-    </View>
-  );
-}

package/src/core/design/atoms/Input/Boxed/index.ts

@@ -1,2 +0,0 @@
-export { Boxed } from './Boxed';
-export type { BoxedProps, BoxedSize, BoxedVariant } from './Boxed';

package/src/core/design/atoms/Input/Boxed/styles.ts

@@ -1,103 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { useToken, type ColorTokenRef } from '../../../theme/useToken';
-import { AmityColorToken } from '../../../tokens/amity-color-tokens';
-
-export type BoxedSize = 'medium' | 'small';
-export type BoxedVariant = 'pill' | 'square' | 'rounded';
-export type BoxedState = 'enabled' | 'focused' | 'invalid' | 'disabled';
-
-// Boxed reuses the TextInput placeholder tokens but has no highlight modifier —
-// only base / filled per state. Precedence: disabled > invalid > focused > enabled.
-const PLACEHOLDER: Record<
-  BoxedState,
-  { base: ColorTokenRef; filled: ColorTokenRef }
-> = {
-  enabled: {
-    base: AmityColorToken.TextInputTextInputPlaceholderEnabled,
-    filled: AmityColorToken.TextInputTextInputPlaceholderEnabledFilled,
-  },
-  focused: {
-    base: AmityColorToken.TextInputTextInputPlaceholderFocused,
-    filled: AmityColorToken.TextInputTextInputPlaceholderFocusedFilled,
-  },
-  invalid: {
-    base: AmityColorToken.TextInputTextInputPlaceholderError,
-    filled: AmityColorToken.TextInputTextInputPlaceholderErrorFilled,
-  },
-  disabled: {
-    base: AmityColorToken.TextInputTextInputPlaceholderDisabled,
-    filled: AmityColorToken.TextInputTextInputPlaceholderDisabledFilled,
-  },
-};
-
-// Geometry (SoT: Boxed.module.css, rem × 16).
-const SIZE = {
-  medium: { gap: 12, minHeight: 56, paddingV: 8, paddingH: 16 },
-  small: { gap: 8, minHeight: 40, paddingV: 10, paddingH: 12 },
-} as const;
-
-const RADIUS: Record<BoxedVariant, number> = {
-  pill: 9999,
-  square: 8,
-  rounded: 24,
-};
-
-type UseStylesArgs = {
-  state: BoxedState;
-  size: BoxedSize;
-  variant: BoxedVariant;
-  filled: boolean;
-  multiline: boolean;
-};
-
-export const useStyles = ({
-  state,
-  size,
-  variant,
-  filled,
-  multiline,
-}: UseStylesArgs) => {
-  const token = useToken();
-
-  const slice = PLACEHOLDER[state];
-  const textColor = token(filled ? slice.filled : slice.base);
-  const g = SIZE[size];
-
-  const styles = StyleSheet.create({
-    boxed: {
-      flexDirection: 'row',
-      alignItems: multiline ? 'flex-start' : 'center',
-      gap: g.gap,
-      width: '100%',
-      minHeight: g.minHeight,
-      paddingVertical: g.paddingV,
-      paddingHorizontal: g.paddingH,
-      borderRadius: RADIUS[variant],
-      borderWidth: 1,
-      borderColor:
-        state === 'invalid'
-          ? token(AmityColorToken.BorderInputBoxedInputError)
-          : 'transparent',
-      backgroundColor: token(AmityColorToken.SurfaceInputBoxedInputDefault),
-    },
-    icon: {
-      width: 20,
-      height: 20,
-      flexShrink: 0,
-    },
-    input: {
-      flex: 1,
-      minWidth: 0,
-      padding: 0,
-      fontSize: 16,
-      color: textColor,
-    },
-  });
-
-  return {
-    styles,
-    token,
-    placeholderColor: textColor,
-    cursorColor: token(AmityColorToken.TextInputTextInputTextCursorDefault),
-  };
-};