From 037c46f96153f799088897e1484ff223d74a5e3c Mon Sep 17 00:00:00 2001
From: "hang.nguyen" <hang.nguyen@saigontechnology.com>
Date: Thu, 23 Oct 2025 15:30:51 +0700
Subject: [PATCH 01/13] feat: add props for code input

---
 src/components/CodeInput/CodeInput.tsx        | 231 +++++++++++++++---
 .../CodeInput/components/ErrorText.tsx        |  18 ++
 .../CodeInput/components/HelperText.tsx       |  29 +++
 src/components/CodeInput/components/index.ts  |   2 +
 src/theme/components/CodeInput.ts             |  47 ++++
 5 files changed, 295 insertions(+), 32 deletions(-)
 create mode 100644 src/components/CodeInput/components/ErrorText.tsx
 create mode 100644 src/components/CodeInput/components/HelperText.tsx
 create mode 100644 src/components/CodeInput/components/index.ts

diff --git a/src/components/CodeInput/CodeInput.tsx b/src/components/CodeInput/CodeInput.tsx
index 85d268a..ec9b932 100644
--- a/src/components/CodeInput/CodeInput.tsx
+++ b/src/components/CodeInput/CodeInput.tsx
@@ -7,12 +7,21 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import {KeyboardTypeOptions, StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle} from 'react-native'
+import {
+  KeyboardTypeOptions,
+  StyleProp,
+  TextInput,
+  TextInputProps,
+  TextProps,
+  TextStyle,
+  ViewStyle,
+} from 'react-native'
 import styled from 'styled-components/native'
 import {useTheme} from '../../hooks'
 import {metrics} from '../../helpers'
 import {Cursor} from './Cursor'
 import {Text} from '../Text/Text'
+import {ErrorText, HelperText} from './components'
 
 // Types
 type CodeInputValue = string
@@ -102,6 +111,63 @@ interface CodeInputProps extends Omit<TextInputProps, 'value' | 'onChangeText' |
 
   /** Test ID for the component */
   testID?: string
+
+  /** Style for outer container */
+  containerStyle?: StyleProp<ViewStyle>
+
+  /** Label text displayed above the code input */
+  label?: string
+
+  /** Custom label component to replace default label text */
+  labelComponent?: ReactNode
+
+  /** Styling for the label */
+  labelStyle?: StyleProp<TextStyle>
+
+  /** Props to be passed to the label Text component */
+  labelProps?: TextProps
+
+  /** Show asterisk beside label for required fields */
+  isRequire?: boolean
+
+  /** Helper text displayed below the code input */
+  helperText?: string
+
+  /** Custom helper component to replace default helper text */
+  helperComponent?: ReactNode
+
+  /** Props to be passed to the helper text component */
+  helperTextProps?: TextProps
+
+  /** Error text displayed below the code input */
+  errorText?: string
+
+  /** Props to be passed to the error text component */
+  errorProps?: TextProps
+
+  /** Enable error state styling */
+  error?: boolean
+
+  /** Style for cell in error state */
+  errorCellStyle?: StyleProp<ViewStyle>
+
+  /** Enable success state styling */
+  success?: boolean
+
+  /** Style for cell in success state */
+  successCellStyle?: StyleProp<ViewStyle>
+
+  /** Style for cell in disabled state */
+  disabledCellStyle?: StyleProp<ViewStyle>
+
+  /** Style for cell in active state */
+  activeCellStyle?: StyleProp<ViewStyle>
+
+  /** React node to be rendered on the left side of the code input */
+  leftComponent?: ReactNode
+
+  /** React node to be rendered on the right side of the code input */
+  rightComponent?: ReactNode
 }
 
 // Default constants moved to theme configuration
@@ -135,6 +201,25 @@ export const CodeInput = forwardRef<CodeInputRef, CodeInputProps>(
       autoFocus,
       disabled,
       testID = 'code-input',
+      containerStyle,
+      label,
+      labelComponent,
+      labelStyle,
+      labelProps,
+      isRequire,
+      helperText,
+      helperComponent,
+      helperTextProps,
+      errorText,
+      errorProps,
+      error,
+      errorCellStyle,
+      success,
+      successCellStyle,
+      disabledCellStyle,
+      activeCellStyle,
+      leftComponent,
+      rightComponent,
       ...textInputProps
     },
     ref,
@@ -295,7 +380,15 @@ export const CodeInput = forwardRef<CodeInputRef, CodeInputProps>(
         const isCellFocused = isFocused && cellIndex === focusedCellIndex
         const hasCellValue = Boolean(cellValue)
 
-        const cellStyles = [cellStyle, hasCellValue && filledCellStyle, isCellFocused && focusCellStyle]
+        // Apply styles in priority order: disabled > error > success > focused > filled > default
+        const cellStyles = [
+          cellStyle,
+          hasCellValue && filledCellStyle,
+          isCellFocused && (activeCellStyle ?? focusCellStyle),
+          success && (successCellStyle ?? CodeInputTheme.successCellStyle),
+          error && (errorCellStyle ?? CodeInputTheme.errorCellStyle),
+          disabled && (disabledCellStyle ?? CodeInputTheme.disabledCellStyle),
+        ]
 
         const wrapperStyles = [cellWrapperStyle, isCellFocused && focusCellWrapperStyle]
 
@@ -311,7 +404,11 @@ export const CodeInput = forwardRef<CodeInputRef, CodeInputProps>(
               accessibilityLabel={`Code input cell ${cellIndex + 1} of ${length}${
                 cellValue ? `, contains ${cellValue}` : ', empty'
               }`}
-              accessibilityHint={`Tap to ${cellValue ? 'clear and ' : ''}enter code digit`}>
+              accessibilityHint={`Tap to ${cellValue ? 'clear and ' : ''}enter code digit`}
+              accessibilityState={{
+                disabled: !!disabled,
+                selected: isCellFocused,
+              }}>
               {renderCellContent(cellIndex, cellValue)}
             </Cell>
           </CellWrapperStyled>
@@ -324,13 +421,20 @@ export const CodeInput = forwardRef<CodeInputRef, CodeInputProps>(
         cellStyle,
         filledCellStyle,
         focusCellStyle,
+        activeCellStyle,
         cellWrapperStyle,
         focusCellWrapperStyle,
         handleCellPress,
         disabled,
+        error,
+        success,
+        errorCellStyle,
+        successCellStyle,
+        disabledCellStyle,
         length,
         testID,
         renderCellContent,
+        CodeInputTheme,
       ],
     )
 
@@ -349,34 +453,74 @@ export const CodeInput = forwardRef<CodeInputRef, CodeInputProps>(
     }
 
     return (
-      <Container testID={testID}>
-        <HiddenTextInput
-          testID={`${testID}-hidden-input`}
-          ref={textInputRef}
-          value={code}
-          onChangeText={handleValueChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          maxLength={actualLength}
-          keyboardType={keyboardType ?? CodeInputTheme.keyboardType}
-          textContentType="oneTimeCode"
-          autoComplete="sms-otp"
-          autoFocus={autoFocus ?? CodeInputTheme.autoFocus}
-          editable={!(disabled ?? CodeInputTheme.disabled)}
-          accessible={true}
-          accessibilityLabel={`Code input with ${actualLength} digits`}
-          accessibilityHint={`Enter ${actualLength} digit code`}
-          accessibilityValue={{
-            text: `${code.length} of ${actualLength} digits entered`,
-          }}
-          {...textInputProps}
-        />
-        <CellContainer
-          style={cellContainerStyle}
-          accessible={true}
-          accessibilityLabel={`Code input cells, ${code.length} of ${actualLength} filled`}>
-          {cells}
-        </CellContainer>
+      <Container testID={testID} style={containerStyle}>
+        {labelComponent ? (
+          <LabelContainer testID={`${testID}-label-container`}>
+            {labelComponent}
+            {isRequire && <RequiredStar testID={`${testID}-required`}> *</RequiredStar>}
+          </LabelContainer>
+        ) : (
+          label && (
+            <LabelText
+              testID={`${testID}-label`}
+              style={labelStyle ?? CodeInputTheme.labelStyle}
+              {...labelProps}>
+              {label}
+              {isRequire && <RequiredStar testID={`${testID}-required`}> *</RequiredStar>}
+            </LabelText>
+          )
+        )}
+        <InputWrapper>
+          <HiddenTextInput
+            testID={`${testID}-hidden-input`}
+            ref={textInputRef}
+            value={code}
+            onChangeText={handleValueChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            maxLength={actualLength}
+            keyboardType={keyboardType ?? CodeInputTheme.keyboardType}
+            textContentType="oneTimeCode"
+            autoComplete="sms-otp"
+            autoFocus={autoFocus ?? CodeInputTheme.autoFocus}
+            editable={!(disabled ?? CodeInputTheme.disabled)}
+            accessible={true}
+            accessibilityLabel={`Code input with ${actualLength} digits${error ? ', error' : ''}${
+              success ? ', success' : ''
+            }${disabled ? ', disabled' : ''}`}
+            accessibilityHint={`Enter ${actualLength} digit code`}
+            accessibilityValue={{
+              text: `${code.length} of ${actualLength} digits entered`,
+            }}
+            accessibilityState={{
+              disabled: !!disabled,
+            }}
+            {...textInputProps}
+          />
+          <ComponentRow>
+            {!!leftComponent && leftComponent}
+            <CellContainer
+              style={cellContainerStyle}
+              accessible={true}
+              accessibilityLabel={`Code input cells, ${code.length} of ${actualLength} filled${
+                error ? ', error' : ''
+              }${success ? ', success' : ''}${disabled ? ', disabled' : ''}`}
+              accessibilityState={{
+                disabled: !!disabled,
+              }}>
+              {cells}
+            </CellContainer>
+            {!!rightComponent && rightComponent}
+          </ComponentRow>
+        </InputWrapper>
+        {!!errorText && <ErrorText errorText={errorText} errorProps={errorProps} />}
+        {!errorText && (!!helperText || !!helperComponent) && (
+          <HelperText
+            helperText={helperText}
+            helperComponent={helperComponent}
+            helperTextProps={helperTextProps}
+          />
+        )}
       </Container>
     )
   },
@@ -385,10 +529,33 @@ export const CodeInput = forwardRef<CodeInputRef, CodeInputProps>(
 CodeInput.displayName = 'CodeInput'
 
 // Styled components
-const Container = styled.View({
+const Container = styled.View({})
+
+const InputWrapper = styled.View({
   position: 'relative',
 })
 
+const LabelContainer = styled.View(({theme}) => ({
+  marginBottom: theme?.spacing?.tiny || 8,
+  flexDirection: 'row',
+  alignItems: 'center',
+}))
+
+const LabelText = styled.Text(({theme}) => ({
+  fontSize: theme?.fontSizes?.sm || 14,
+  color: theme?.colors?.darkText || '#333',
+  marginBottom: theme?.spacing?.tiny || 8,
+}))
+
+const RequiredStar = styled.Text(({theme}) => ({
+  color: theme?.colors?.errorText || '#ff0000',
+}))
+
+const ComponentRow = styled.View({
+  flexDirection: 'row',
+  alignItems: 'center',
+})
+
 const CellWrapperStyled = styled.View({})
 
 const Cell = styled.Pressable<{disabled?: boolean}>(({theme, disabled}) => ({
diff --git a/src/components/CodeInput/components/ErrorText.tsx b/src/components/CodeInput/components/ErrorText.tsx
new file mode 100644
index 0000000..391aa62
--- /dev/null
+++ b/src/components/CodeInput/components/ErrorText.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import type {TextProps} from 'react-native'
+import styled from 'styled-components/native'
+
+interface ErrorTextProps {
+  errorText?: string
+  errorProps?: TextProps
+}
+
+export const ErrorText: React.FC<ErrorTextProps> = ({errorText, errorProps}) => (
+  <ErrorTextStyled {...errorProps}>{errorText}</ErrorTextStyled>
+)
+
+const ErrorTextStyled = styled.Text(({theme}) => ({
+  fontSize: theme?.fontSizes?.['2xs'],
+  color: theme?.colors?.errorText,
+  marginTop: theme?.spacing?.tiny,
+}))
diff --git a/src/components/CodeInput/components/HelperText.tsx b/src/components/CodeInput/components/HelperText.tsx
new file mode 100644
index 0000000..7d73916
--- /dev/null
+++ b/src/components/CodeInput/components/HelperText.tsx
@@ -0,0 +1,29 @@
+import React, {ReactNode} from 'react'
+import type {TextProps} from 'react-native'
+import styled from 'styled-components/native'
+
+interface HelperTextProps {
+  helperText?: string
+  helperComponent?: ReactNode
+  helperTextProps?: TextProps
+}
+
+export const HelperText: React.FC<HelperTextProps> = ({helperText, helperComponent, helperTextProps}) => {
+  // Prioritize custom component over text
+  if (helperComponent) {
+    return <HelperContainer>{helperComponent}</HelperContainer>
+  }
+
+  // Fall back to text rendering
+  return <HelperTextStyled {...helperTextProps}>{helperText}</HelperTextStyled>
+}
+
+const HelperContainer = styled.View(({theme}) => ({
+  marginTop: theme?.spacing?.tiny,
+}))
+
+const HelperTextStyled = styled.Text(({theme}) => ({
+  fontSize: theme?.fontSizes?.['2xs'],
+  color: theme?.colors?.gray,
+  marginTop: theme?.spacing?.tiny,
+}))
diff --git a/src/components/CodeInput/components/index.ts b/src/components/CodeInput/components/index.ts
new file mode 100644
index 0000000..6026a2b
--- /dev/null
+++ b/src/components/CodeInput/components/index.ts
@@ -0,0 +1,2 @@
+export {ErrorText} from './ErrorText'
+export {HelperText} from './HelperText'
diff --git a/src/theme/components/CodeInput.ts b/src/theme/components/CodeInput.ts
index d53a7be..bf53643 100644
--- a/src/theme/components/CodeInput.ts
+++ b/src/theme/components/CodeInput.ts
@@ -79,6 +79,30 @@ export type CodeInputThemeProps = {
    * Disable input
    */
   disabled: boolean
+  /**
+   * Style for outer container
+   */
+  containerStyle?: StyleProp<ViewStyle>
+  /**
+   * Styling for the label
+   */
+  labelStyle?: StyleProp<TextStyle>
+  /**
+   * Style for cell in error state
+   */
+  errorCellStyle?: StyleProp<ViewStyle>
+  /**
+   * Style for cell in success state
+   */
+  successCellStyle?: StyleProp<ViewStyle>
+  /**
+   * Style for cell in disabled state
+   */
+  disabledCellStyle?: StyleProp<ViewStyle>
+  /**
+   * Style for cell in active state (alias for focusCellStyle)
+   */
+  activeCellStyle?: StyleProp<ViewStyle>
 }
 
 export const CodeInputTheme: CodeInputThemeProps = {
@@ -134,4 +158,27 @@ export const CodeInputTheme: CodeInputThemeProps = {
   },
   autoFocus: false,
   disabled: false,
+  containerStyle: undefined,
+  labelStyle: {
+    fontSize: 14,
+    color: base.colors.darkText,
+    marginBottom: 8,
+  },
+  errorCellStyle: {
+    borderColor: base.colors.error,
+    borderWidth: 2,
+  },
+  successCellStyle: {
+    borderColor: base.colors.success,
+    borderWidth: 2,
+  },
+  disabledCellStyle: {
+    backgroundColor: '#f5f5f5',
+    borderColor: base.colors.primaryBorder,
+    opacity: 0.5,
+  },
+  activeCellStyle: {
+    borderColor: base.colors.primary,
+    borderWidth: 2,
+  },
 }

From 9462fc666ce2fab8e1cacdfe9a95a15326e061a8 Mon Sep 17 00:00:00 2001
From: "hang.nguyen" <hang.nguyen@saigontechnology.com>
Date: Thu, 23 Oct 2025 16:07:45 +0700
Subject: [PATCH 02/13] feat: update CodeInput readme

---
 src/components/CodeInput/CodeInput.tsx |   2 +-
 src/components/CodeInput/README.md     | 276 +++++++++++++++++++++++--
 2 files changed, 257 insertions(+), 21 deletions(-)

diff --git a/src/components/CodeInput/CodeInput.tsx b/src/components/CodeInput/CodeInput.tsx
index ec9b932..ef42a23 100644
--- a/src/components/CodeInput/CodeInput.tsx
+++ b/src/components/CodeInput/CodeInput.tsx
@@ -460,7 +460,7 @@ export const CodeInput = forwardRef<CodeInputRef, CodeInputProps>(
             {isRequire && <RequiredStar testID={`${testID}-required`}> *</RequiredStar>}
           </LabelContainer>
         ) : (
-          label && (
+          !!label && (
             <LabelText
               testID={`${testID}-label`}
               style={labelStyle ?? CodeInputTheme.labelStyle}
diff --git a/src/components/CodeInput/README.md b/src/components/CodeInput/README.md
index 3bb5ea8..471ae67 100644
--- a/src/components/CodeInput/README.md
+++ b/src/components/CodeInput/README.md
@@ -168,26 +168,89 @@ const styles = StyleSheet.create({
 
 ### CodeInputProps
 
-| Prop                   | Type                     | Default     | Description                                   |
-| ---------------------- | ------------------------ | ----------- | --------------------------------------------- |
-| `length`               | `number`                 | Theme       | Number of input cells (overrides theme)       |
-| `value`                | `string`                 | `''`        | Current input value                           |
-| `onChangeText`         | `(code: string) => void` | `undefined` | Callback when code changes                    |
-| `onSubmit`             | `(code: string) => void` | `undefined` | Callback when code is complete                |
-| `onClear`              | `() => void`             | `undefined` | Callback when code is cleared                 |
-| `cellStyle`            | `StyleProp<ViewStyle>`   | Theme       | Style for individual cells (overrides theme)  |
-| `filledCellStyle`      | `StyleProp<ViewStyle>`   | Theme       | Style for cells with values (overrides theme) |
-| `focusCellStyle`       | `StyleProp<ViewStyle>`   | Theme       | Style for focused cell (overrides theme)      |
-| `textStyle`            | `StyleProp<TextStyle>`   | Theme       | Style for cell text (overrides theme)         |
-| `focusTextStyle`       | `StyleProp<TextStyle>`   | Theme       | Style for focused cell text (overrides theme) |
-| `secureTextEntry`      | `boolean`                | Theme       | Enable secure input mode (overrides theme)    |
-| `keyboardType`         | `KeyboardTypeOptions`    | Theme       | Keyboard type to show (overrides theme)       |
-| `withCursor`           | `boolean`                | Theme       | Show cursor in focused cell (overrides theme) |
-| `placeholder`          | `string`                 | Theme       | Placeholder text for empty cells              |
-| `placeholderTextColor` | `string`                 | Theme       | Color for placeholder text (overrides theme)  |
-| `placeholderAsDot`     | `boolean`                | Theme       | Render placeholder as dot (overrides theme)   |
-| `autoFocus`            | `boolean`                | Theme       | Auto focus on mount (overrides theme)         |
-| `disabled`             | `boolean`                | Theme       | Disable input (overrides theme)               |
+#### Core Props
+
+| Prop           | Type                     | Default     | Description                    |
+| -------------- | ------------------------ | ----------- | ------------------------------ |
+| `length`       | `number`                 | Theme       | Number of input cells          |
+| `value`        | `string`                 | `''`        | Current input value            |
+| `onChangeText` | `(code: string) => void` | `undefined` | Callback when code changes     |
+| `onSubmit`     | `(code: string) => void` | `undefined` | Callback when code is complete |
+| `onClear`      | `() => void`             | `undefined` | Callback when code is cleared  |
+| `autoFocus`    | `boolean`                | Theme       | Auto focus on mount            |
+| `disabled`     | `boolean`                | Theme       | Disable input                  |
+| `keyboardType` | `KeyboardTypeOptions`    | Theme       | Keyboard type to show          |
+| `testID`       | `string`                 | `undefined` | Test ID for the component      |
+
+#### Styling Props
+
+| Prop                    | Type                   | Default     | Description                           |
+| ----------------------- | ---------------------- | ----------- | ------------------------------------- |
+| `containerStyle`        | `StyleProp<ViewStyle>` | `undefined` | Style for outer container             |
+| `cellContainerStyle`    | `StyleProp<ViewStyle>` | `undefined` | Style for container holding all cells |
+| `cellStyle`             | `StyleProp<ViewStyle>` | Theme       | Style for individual cells            |
+| `cellWrapperStyle`      | `StyleProp<ViewStyle>` | `undefined` | Style for wrapper around each cell    |
+| `filledCellStyle`       | `StyleProp<ViewStyle>` | Theme       | Style for cells with values           |
+| `focusCellStyle`        | `StyleProp<ViewStyle>` | Theme       | Style for focused cell                |
+| `focusCellWrapperStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for wrapper around focused cell |
+| `activeCellStyle`       | `StyleProp<ViewStyle>` | `undefined` | Style for cell in active state        |
+| `errorCellStyle`        | `StyleProp<ViewStyle>` | `undefined` | Style for cell in error state         |
+| `successCellStyle`      | `StyleProp<ViewStyle>` | `undefined` | Style for cell in success state       |
+| `disabledCellStyle`     | `StyleProp<ViewStyle>` | `undefined` | Style for cell in disabled state      |
+
+#### Text & Secure Entry Props
+
+| Prop                   | Type                   | Default     | Description                      |
+| ---------------------- | ---------------------- | ----------- | -------------------------------- |
+| `textStyle`            | `StyleProp<TextStyle>` | Theme       | Style for cell text              |
+| `focusTextStyle`       | `StyleProp<TextStyle>` | Theme       | Style for focused cell text      |
+| `secureTextEntry`      | `boolean`              | Theme       | Enable secure input mode         |
+| `secureViewStyle`      | `StyleProp<ViewStyle>` | `undefined` | Style for secure text entry dots |
+| `placeholder`          | `string`               | Theme       | Placeholder text for empty cells |
+| `placeholderTextColor` | `string`               | Theme       | Color for placeholder text       |
+| `placeholderAsDot`     | `boolean`              | Theme       | Render placeholder as dot        |
+| `placeholderDotStyle`  | `StyleProp<ViewStyle>` | `undefined` | Style for placeholder dot        |
+
+#### Cursor Props
+
+| Prop           | Type              | Default     | Description                 |
+| -------------- | ----------------- | ----------- | --------------------------- |
+| `withCursor`   | `boolean`         | Theme       | Show cursor in focused cell |
+| `customCursor` | `() => ReactNode` | `undefined` | Custom cursor component     |
+
+#### Label Props
+
+| Prop             | Type                   | Default     | Description                               |
+| ---------------- | ---------------------- | ----------- | ----------------------------------------- |
+| `label`          | `string`               | `undefined` | Label text displayed above the code input |
+| `labelComponent` | `ReactNode`            | `undefined` | Custom label component to replace default |
+| `labelStyle`     | `StyleProp<TextStyle>` | `undefined` | Styling for the label                     |
+| `labelProps`     | `TextProps`            | `undefined` | Props passed to the label Text component  |
+| `isRequire`      | `boolean`              | `undefined` | Show asterisk beside label for required   |
+
+#### Helper & Error Text Props
+
+| Prop              | Type        | Default     | Description                                |
+| ----------------- | ----------- | ----------- | ------------------------------------------ |
+| `helperText`      | `string`    | `undefined` | Helper text displayed below the code input |
+| `helperComponent` | `ReactNode` | `undefined` | Custom helper component to replace default |
+| `helperTextProps` | `TextProps` | `undefined` | Props passed to the helper text component  |
+| `errorText`       | `string`    | `undefined` | Error text displayed below the code input  |
+| `errorProps`      | `TextProps` | `undefined` | Props passed to the error text component   |
+
+#### State Props
+
+| Prop      | Type      | Default     | Description                  |
+| --------- | --------- | ----------- | ---------------------------- |
+| `error`   | `boolean` | `undefined` | Enable error state styling   |
+| `success` | `boolean` | `undefined` | Enable success state styling |
+
+#### Component Props
+
+| Prop             | Type        | Default     | Description                                    |
+| ---------------- | ----------- | ----------- | ---------------------------------------------- |
+| `leftComponent`  | `ReactNode` | `undefined` | React node rendered on the left side of input  |
+| `rightComponent` | `ReactNode` | `undefined` | React node rendered on the right side of input |
 
 ## Usage Patterns
 
@@ -284,6 +347,132 @@ const OTPInput = () => {
 }
 ```
 
+### Error State Handling
+
+```tsx
+const CodeInputWithError = () => {
+  const [code, setCode] = useState('')
+  const [error, setError] = useState(false)
+  const [errorMessage, setErrorMessage] = useState('')
+
+  const handleCodeChange = (newCode: string) => {
+    setCode(newCode)
+    // Clear error when user types
+    if (error) {
+      setError(false)
+      setErrorMessage('')
+    }
+  }
+
+  const handleCodeSubmit = async (finalCode: string) => {
+    try {
+      await verifyCode(finalCode)
+      // Success handling
+      navigation.navigate('Success')
+    } catch (err) {
+      setError(true)
+      setErrorMessage('Invalid code. Please try again.')
+      setCode('')
+    }
+  }
+
+  return (
+    <CodeInput
+      length={6}
+      value={code}
+      onChangeText={handleCodeChange}
+      onSubmit={handleCodeSubmit}
+      error={error}
+      errorText={errorMessage}
+      errorCellStyle={styles.errorCell}
+      label="Verification Code"
+      isRequire={true}
+      helperText="Enter the 6-digit code sent to your phone"
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  errorCell: {
+    borderColor: '#FF3B30',
+    borderWidth: 2,
+    backgroundColor: '#FFF5F5',
+  },
+})
+```
+
+### Success State Handling
+
+```tsx
+const CodeInputWithSuccess = () => {
+  const [code, setCode] = useState('')
+  const [success, setSuccess] = useState(false)
+
+  const handleCodeSubmit = async (finalCode: string) => {
+    const isValid = await verifyCode(finalCode)
+
+    if (isValid) {
+      setSuccess(true)
+      setTimeout(() => {
+        navigation.navigate('NextScreen')
+      }, 1000)
+    }
+  }
+
+  return (
+    <CodeInput
+      length={6}
+      value={code}
+      onChangeText={setCode}
+      onSubmit={handleCodeSubmit}
+      success={success}
+      successCellStyle={styles.successCell}
+      label="Verification Code"
+      disabled={success}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  successCell: {
+    borderColor: '#34C759',
+    borderWidth: 2,
+    backgroundColor: '#F0FFF4',
+  },
+})
+```
+
+### With Left & Right Components
+
+```tsx
+import {View, TouchableOpacity} from 'react-native'
+import Icon from 'react-native-vector-icons/Ionicons'
+
+const CodeInputWithComponents = () => {
+  const [code, setCode] = useState('')
+
+  const handleClear = () => {
+    setCode('')
+  }
+
+  return (
+    <CodeInput
+      length={6}
+      value={code}
+      onChangeText={setCode}
+      leftComponent={<Icon name="lock-closed" size={24} color="#666" style={{marginRight: 8}} />}
+      rightComponent={
+        code.length > 0 && (
+          <TouchableOpacity onPress={handleClear} style={{marginLeft: 8}}>
+            <Icon name="close-circle" size={24} color="#999" />
+          </TouchableOpacity>
+        )
+      }
+    />
+  )
+}
+```
+
 ### Bank PIN with Secure Display
 
 ```tsx
@@ -371,9 +560,31 @@ const customTheme = extendTheme({
         fontSize: 18,
         fontWeight: '600',
       },
+      labelStyle: {
+        // Label text styling
+        fontSize: 14,
+        fontWeight: '500',
+        color: '#333',
+      },
+      errorCellStyle: {
+        // Style for cells in error state
+        borderColor: '#FF3B30',
+        borderWidth: 2,
+      },
+      successCellStyle: {
+        // Style for cells in success state
+        borderColor: '#34C759',
+        borderWidth: 2,
+      },
+      disabledCellStyle: {
+        // Style for cells in disabled state
+        opacity: 0.5,
+        backgroundColor: '#F5F5F5',
+      },
       secureTextEntry: false, // Secure input mode
       keyboardType: 'number-pad', // Keyboard type
       autoFocus: false, // Auto focus behavior
+      disabled: false, // Disabled state
       placeholderTextColor: '#999999', // Placeholder color
     },
   },
@@ -409,15 +620,40 @@ CodeInputTheme: {
     borderRadius: 8,              // metrics.borderRadius
     backgroundColor: '#FFFFFF',   // base.colors.white
   },
+  filledCellStyle: {
+    borderColor: '#007AFF',       // Highlight when filled
+  },
+  focusCellStyle: {
+    borderColor: '#007AFF',       // Highlight when focused
+    borderWidth: 2,
+  },
   textStyle: {
     fontSize: 18,
     fontWeight: '600',
     color: '#000000',            // base.colors.black
   },
+  labelStyle: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#333333',            // Label text color
+  },
+  errorCellStyle: {
+    borderColor: '#FF3B30',      // Error state
+    borderWidth: 2,
+  },
+  successCellStyle: {
+    borderColor: '#34C759',      // Success state
+    borderWidth: 2,
+  },
+  disabledCellStyle: {
+    opacity: 0.5,                // Disabled state
+    backgroundColor: '#F5F5F5',
+  },
   secureTextEntry: false,
   keyboardType: 'number-pad',
   autoFocus: false,
   disabled: false,
+  placeholderTextColor: '#999999',
 }
 ```
 

From 9edc176da05189be8dc48d6532fb55ad2b737fe5 Mon Sep 17 00:00:00 2001
From: "hang.nguyen" <hang.nguyen@saigontechnology.com>
Date: Thu, 23 Oct 2025 15:22:03 +0700
Subject: [PATCH 03/13] feat: update example layout components

---
 example/app/_layout.tsx                       |  23 +-
 example/app/code-input.tsx                    |   8 +
 example/app/index.tsx                         | 320 +++++++++++++--
 .../CodeInputDemo/AdditionalFeatures.tsx      |  32 ++
 .../CodeInputDemo/AdvancedCellStyling.tsx     | 181 +++++++++
 .../CodeInputDemo/BasicExamples.tsx           |  32 ++
 .../CodeInputDemo/DisabledState.tsx           |  23 ++
 .../CodeInputDemo/IconsAndComponents.tsx      |  45 ++
 .../CodeInputDemo/InteractivePlayground.tsx   |  94 +++++
 .../CodeInputDemo/SecurityAndStyling.tsx      |  53 +++
 .../CodeInputDemo/ValidationStates.tsx        |  34 ++
 example/components/CodeInputDemo/index.tsx    |  32 ++
 example/components/CodeInputDemo/styles.ts    | 384 ++++++++++++++++++
 example/components/CodeInputDemo/utils.tsx    |  38 ++
 example/constants/components.ts               | 139 +++++++
 example/theme/demoColors.ts                   | 132 ++++++
 example/theme/demoMetrics.ts                  | 210 ++++++++++
 17 files changed, 1734 insertions(+), 46 deletions(-)
 create mode 100644 example/app/code-input.tsx
 create mode 100644 example/components/CodeInputDemo/AdditionalFeatures.tsx
 create mode 100644 example/components/CodeInputDemo/AdvancedCellStyling.tsx
 create mode 100644 example/components/CodeInputDemo/BasicExamples.tsx
 create mode 100644 example/components/CodeInputDemo/DisabledState.tsx
 create mode 100644 example/components/CodeInputDemo/IconsAndComponents.tsx
 create mode 100644 example/components/CodeInputDemo/InteractivePlayground.tsx
 create mode 100644 example/components/CodeInputDemo/SecurityAndStyling.tsx
 create mode 100644 example/components/CodeInputDemo/ValidationStates.tsx
 create mode 100644 example/components/CodeInputDemo/index.tsx
 create mode 100644 example/components/CodeInputDemo/styles.ts
 create mode 100644 example/components/CodeInputDemo/utils.tsx
 create mode 100644 example/constants/components.ts
 create mode 100644 example/theme/demoColors.ts
 create mode 100644 example/theme/demoMetrics.ts

diff --git a/example/app/_layout.tsx b/example/app/_layout.tsx
index a463057..6531587 100644
--- a/example/app/_layout.tsx
+++ b/example/app/_layout.tsx
@@ -10,7 +10,28 @@ export default function RootLayout() {
   return (
     <BaseProvider>
       <Stack>
-        <Stack.Screen name="index" options={{ headerShown: false }} />
+        <Stack.Screen
+          name="index"
+          options={{
+            headerShown: false
+          }}
+        />
+        <Stack.Screen
+          name="code-input"
+          options={{
+            title: 'CodeInput Component',
+            headerShown: true,
+            headerBackTitle: 'Back',
+            headerStyle: {
+              backgroundColor: '#f8f9fa',
+            },
+            headerTintColor: '#1a1a1a',
+            headerTitleStyle: {
+              fontWeight: 'bold',
+              fontSize: 18,
+            },
+          }}
+        />
       </Stack>
       <StatusBar style="auto" />
     </BaseProvider>
diff --git a/example/app/code-input.tsx b/example/app/code-input.tsx
new file mode 100644
index 0000000..2832ce8
--- /dev/null
+++ b/example/app/code-input.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { CodeInputDemo } from '../components/CodeInputDemo'
+
+const CodeInputDemoScreen = () => {
+  return <CodeInputDemo />
+}
+
+export default CodeInputDemoScreen
diff --git a/example/app/index.tsx b/example/app/index.tsx
index e238590..da3bbf6 100644
--- a/example/app/index.tsx
+++ b/example/app/index.tsx
@@ -1,50 +1,119 @@
-import dayjs from 'dayjs'
-import React, { useRef } from 'react'
-import { Alert, StyleSheet, Text, View } from 'react-native'
-import { Button, CountDown, CountDownRef } from 'rn-base-component'
+import React from 'react'
+import { ScrollView, StyleSheet, Text, View, Pressable, SafeAreaView } from 'react-native'
+import { useRouter } from 'expo-router'
+import { COMPONENTS, ComponentItem } from '../constants/components'
+import { demoColors } from '../theme/demoColors'
+import { demoMetrics, componentMetrics } from '../theme/demoMetrics'
 
 const HomeScreen = () => {
-  const countdownRef = useRef<CountDownRef>(null)
-  const handleRestart = () => {
-    countdownRef.current?.restart()
-  }
-  const handleStop = () => {
-    countdownRef.current?.stopCountDown()
-  }
-  const handleGetCurrentTime = () => {
-    console.log(countdownRef.current?.getCurrentTime())
-    Alert.alert('Current Time', countdownRef.current?.getCurrentTime().toString() || '0')
+  const router = useRouter()
+
+  const handleComponentPress = (item: ComponentItem) => {
+    if (item.route && item.status === 'Complete') {
+      router.push(item.route as any)
+    }
   }
-  const handleResume = () => {
-    countdownRef.current?.resumeCountDown()
+
+  const renderComponentCard = (item: ComponentItem) => {
+    const isAvailable = item.status === 'Complete'
+
+    return (
+      <Pressable
+        key={item.id}
+        style={({ pressed }) => [
+          styles.card,
+          !isAvailable && styles.cardDisabled,
+          pressed && isAvailable && styles.cardPressed,
+        ]}
+        onPress={() => handleComponentPress(item)}
+        disabled={!isAvailable}
+      >
+        <View style={styles.cardHeader}>
+          <View style={styles.iconContainer}>
+            <Text style={styles.icon}>{item.icon}</Text>
+          </View>
+          <View style={styles.statusBadge}>
+            <Text
+              style={[
+                styles.statusText,
+                item.status === 'Complete' ? styles.statusComplete : styles.statusComingSoon,
+              ]}
+            >
+              {item.status}
+            </Text>
+          </View>
+        </View>
+
+        <View style={styles.cardContent}>
+          <Text style={styles.componentName}>{item.name}</Text>
+          <Text style={styles.componentDescription}>{item.description}</Text>
+
+          <View style={styles.categoryBadge}>
+            <Text style={styles.categoryText}>{item.category}</Text>
+          </View>
+        </View>
+
+        {isAvailable && (
+          <View style={styles.cardFooter}>
+            <Text style={styles.viewDemoText}>View Demo →</Text>
+          </View>
+        )}
+      </Pressable>
+    )
   }
-  const handleGetCountDownStatus = () => {
-    Alert.alert('Countdown Status', countdownRef.current?.getCountDownStatus() || '0')
+
+  const groupedComponents = {
+    Input: COMPONENTS.filter(c => c.category === 'Input'),
+    Display: COMPONENTS.filter(c => c.category === 'Display'),
+    Navigation: COMPONENTS.filter(c => c.category === 'Navigation'),
+    Feedback: COMPONENTS.filter(c => c.category === 'Feedback'),
   }
+
   return (
-    <View style={styles.container}>
-      <Text>index</Text>
-      <View style={styles.buttonContainer}> 
-        <Button onPress={handleRestart}>Reset Countdown</Button>
-        <Button onPress={handleStop}>Stop Countdown</Button>
-        <Button onPress={handleResume}>Resume Countdown</Button>
-        <Button onPress={handleGetCurrentTime}>Get Current Time</Button>
-        <Button onPress={handleGetCountDownStatus}>Get Countdown Status</Button>
-      </View>
-      <CountDown
-      ref={countdownRef}  
-      countDownTo={
-        dayjs('2025-09-13T00:00:00')
-      }
-      timeToShow={['D', 'H', 'M', 'S']}
-      showLabels={true}
-      separator=" : "
-      // fontSize={20}
-      // onFinish={() => alert('Happy New Year!')}
-      textStyle={{color:'red', fontSize:35, fontFamily:'Arial'}}
-      unitTextStyle={{color:'blue', fontSize:30, fontFamily:'Arial'}}
-    />
-    </View>
+    <SafeAreaView style={styles.container}>
+      <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
+        <View style={styles.header}>
+          <Text style={styles.title}>RN Base Component</Text>
+          <Text style={styles.subtitle}>
+            Explore comprehensive component library with interactive demos
+          </Text>
+        </View>
+
+        <View style={styles.statsContainer}>
+          <View style={styles.statItem}>
+            <Text style={styles.statNumber}>{COMPONENTS.length}</Text>
+            <Text style={styles.statLabel}>Components</Text>
+          </View>
+          <View style={styles.statDivider} />
+          <View style={styles.statItem}>
+            <Text style={styles.statNumber}>
+              {COMPONENTS.filter(c => c.status === 'Complete').length}
+            </Text>
+            <Text style={styles.statLabel}>Ready</Text>
+          </View>
+          <View style={styles.statDivider} />
+          <View style={styles.statItem}>
+            <Text style={styles.statNumber}>4</Text>
+            <Text style={styles.statLabel}>Categories</Text>
+          </View>
+        </View>
+
+        {Object.entries(groupedComponents).map(
+          ([category, components]) =>
+            components.length > 0 && (
+              <View key={category} style={styles.categorySection}>
+                <Text style={styles.categoryTitle}>{category} Components</Text>
+                <View style={styles.cardsGrid}>{components.map(renderComponentCard)}</View>
+              </View>
+            )
+        )}
+
+        <View style={styles.footer}>
+          <Text style={styles.footerText}>Built with React Native & Expo</Text>
+          <Text style={styles.footerSubtext}>v1.0.0</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
   )
 }
 
@@ -53,12 +122,173 @@ export default HomeScreen
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
+    backgroundColor: demoColors.background,
+  },
+  contentContainer: {
+    padding: componentMetrics.containerPadding,
+    paddingBottom: componentMetrics.containerPaddingBottom,
+  },
+  header: {
+    marginBottom: demoMetrics.margin.xlarge,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: demoMetrics.fontSize.hero,
+    fontWeight: 'bold',
+    color: demoColors.textPrimary,
+    marginBottom: demoMetrics.spacing.small,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: demoMetrics.fontSize.normal,
+    color: demoColors.textSecondary,
+    textAlign: 'center',
+    lineHeight: demoMetrics.lineHeight.normal,
+    paddingHorizontal: demoMetrics.padding.large,
+  },
+  statsContainer: {
+    flexDirection: 'row',
+    backgroundColor: demoColors.surface,
+    borderRadius: demoMetrics.borderRadius.xxlarge,
+    padding: demoMetrics.padding.large,
+    marginBottom: demoMetrics.margin.xlarge,
+    shadowColor: demoColors.shadow,
+    ...demoMetrics.shadow.normal,
+  },
+  statItem: {
+    flex: 1,
     alignItems: 'center',
   },
-  buttonContainer: {
-    gap: 10,
+  statNumber: {
+    fontSize: demoMetrics.fontSize.heading,
+    fontWeight: 'bold',
+    color: demoColors.primary,
+    marginBottom: demoMetrics.spacing.tiny,
+  },
+  statLabel: {
+    fontSize: demoMetrics.fontSize.caption,
+    color: demoColors.textSecondary,
+    fontWeight: '500',
+  },
+  statDivider: {
+    width: componentMetrics.statDividerWidth,
+    backgroundColor: demoColors.border,
+    marginHorizontal: componentMetrics.statDividerMargin,
+  },
+  categorySection: {
+    marginBottom: demoMetrics.margin.xlarge,
+  },
+  categoryTitle: {
+    fontSize: demoMetrics.fontSize.large,
+    fontWeight: '700',
+    color: demoColors.textDark,
+    marginBottom: demoMetrics.spacing.normal,
+    paddingLeft: demoMetrics.padding.tiny,
+  },
+  cardsGrid: {
+    gap: componentMetrics.cardGap,
+  },
+  card: {
+    backgroundColor: demoColors.surface,
+    borderRadius: componentMetrics.cardBorderRadius,
+    padding: componentMetrics.cardPadding,
+    shadowColor: demoColors.shadow,
+    ...demoMetrics.shadow.normal,
+    borderWidth: demoMetrics.borderWidth.normal,
+    borderColor: demoColors.border,
+  },
+  cardDisabled: {
+    opacity: demoMetrics.opacity.disabled,
+  },
+  cardPressed: {
+    transform: [{ scale: 0.98 }],
+    shadowOpacity: 0.12,
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: demoMetrics.margin.medium,
+  },
+  iconContainer: {
+    width: demoMetrics.iconSize.huge,
+    height: demoMetrics.iconSize.huge,
+    backgroundColor: demoColors.primaryBackgroundLight,
+    borderRadius: demoMetrics.borderRadius.xlarge,
     justifyContent: 'center',
     alignItems: 'center',
   },
-})
\ No newline at end of file
+  icon: {
+    fontSize: demoMetrics.fontSize.heading,
+  },
+  statusBadge: {
+    paddingHorizontal: demoMetrics.padding.medium,
+    paddingVertical: demoMetrics.padding.tiny,
+    borderRadius: demoMetrics.borderRadius.medium,
+    backgroundColor: demoColors.badgeBackground,
+  },
+  statusText: {
+    fontSize: demoMetrics.fontSize.tiny,
+    fontWeight: '600',
+  },
+  statusComplete: {
+    color: demoColors.success,
+  },
+  statusComingSoon: {
+    color: demoColors.textTertiary,
+  },
+  cardContent: {
+    marginBottom: demoMetrics.margin.normal,
+  },
+  componentName: {
+    fontSize: demoMetrics.fontSize.large,
+    fontWeight: '700',
+    color: demoColors.textDark,
+    marginBottom: demoMetrics.spacing.small,
+  },
+  componentDescription: {
+    fontSize: demoMetrics.fontSize.body,
+    color: demoColors.textSecondary,
+    lineHeight: demoMetrics.lineHeight.tight,
+    marginBottom: demoMetrics.margin.medium,
+  },
+  categoryBadge: {
+    alignSelf: 'flex-start',
+    paddingHorizontal: demoMetrics.padding.medium,
+    paddingVertical: demoMetrics.padding.tiny,
+    backgroundColor: demoColors.primaryBackground,
+    borderRadius: demoMetrics.borderRadius.small,
+  },
+  categoryText: {
+    fontSize: demoMetrics.fontSize.small,
+    fontWeight: '600',
+    color: demoColors.primary,
+  },
+  cardFooter: {
+    paddingTop: demoMetrics.padding.normal,
+    borderTopWidth: demoMetrics.borderWidth.normal,
+    borderTopColor: demoColors.borderLight,
+  },
+  viewDemoText: {
+    fontSize: demoMetrics.fontSize.body,
+    fontWeight: '600',
+    color: demoColors.primary,
+    textAlign: 'center',
+  },
+  footer: {
+    marginTop: demoMetrics.spacing.xxxlarge,
+    paddingTop: demoMetrics.padding.large,
+    borderTopWidth: demoMetrics.borderWidth.normal,
+    borderTopColor: demoColors.border,
+    alignItems: 'center',
+  },
+  footerText: {
+    fontSize: demoMetrics.fontSize.body,
+    color: demoColors.textSecondary,
+    marginBottom: demoMetrics.spacing.tiny,
+  },
+  footerSubtext: {
+    fontSize: demoMetrics.fontSize.small,
+    color: demoColors.textTertiary,
+  },
+})
diff --git a/example/components/CodeInputDemo/AdditionalFeatures.tsx b/example/components/CodeInputDemo/AdditionalFeatures.tsx
new file mode 100644
index 0000000..6206796
--- /dev/null
+++ b/example/components/CodeInputDemo/AdditionalFeatures.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { CodeInput } from 'rn-base-component'
+import { demoStyles } from './styles'
+
+export const AdditionalFeatures = () => {
+  return (
+    <View style={demoStyles.section}>
+      <Text style={demoStyles.sectionTitle}>💭 Additional Features</Text>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>With Cursor Animation</Text>
+        <CodeInput
+          length={6}
+          label="Code Input"
+          withCursor
+          helperText="Shows blinking cursor in focused cell"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Auto Focus Enabled</Text>
+        <CodeInput
+          length={4}
+          label="Auto Focus"
+          autoFocus={false}
+          helperText="Keyboard appears automatically (autoFocus can be true)"
+        />
+      </View>
+    </View>
+  )
+}
diff --git a/example/components/CodeInputDemo/AdvancedCellStyling.tsx b/example/components/CodeInputDemo/AdvancedCellStyling.tsx
new file mode 100644
index 0000000..3822258
--- /dev/null
+++ b/example/components/CodeInputDemo/AdvancedCellStyling.tsx
@@ -0,0 +1,181 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { CodeInput } from 'rn-base-component'
+import { demoStyles, customCellStyles } from './styles'
+
+export const AdvancedCellStyling = () => {
+  return (
+    <View style={demoStyles.section}>
+      <Text style={demoStyles.sectionTitle}>🎨 Advanced Cell Styling</Text>
+      <Text style={demoStyles.sectionDescription}>
+        Explore different visual styles for code input cells
+      </Text>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Circular Cells</Text>
+        <CodeInput
+          length={4}
+          label="Rounded Style"
+          cellStyle={customCellStyles.circularCell}
+          focusCellStyle={customCellStyles.circularFocusCell}
+          filledCellStyle={customCellStyles.circularFilledCell}
+          textStyle={customCellStyles.circularText}
+          helperText="Fully rounded circular cells"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Square/Sharp Cells</Text>
+        <CodeInput
+          length={4}
+          label="Sharp Corners"
+          cellStyle={customCellStyles.squareCell}
+          focusCellStyle={customCellStyles.squareFocusCell}
+          textStyle={customCellStyles.squareText}
+          helperText="No border radius, sharp edges"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Gradient Background</Text>
+        <CodeInput
+          length={5}
+          label="Colorful Cells"
+          cellStyle={customCellStyles.gradientCell}
+          focusCellStyle={customCellStyles.gradientFocusCell}
+          filledCellStyle={customCellStyles.gradientFilledCell}
+          textStyle={customCellStyles.gradientText}
+          helperText="Colored backgrounds with gradient feel"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Large Size Variant</Text>
+        <CodeInput
+          length={4}
+          label="Large Cells"
+          cellStyle={customCellStyles.largeCell}
+          focusCellStyle={customCellStyles.largeFocusCell}
+          textStyle={customCellStyles.largeText}
+          helperText="Bigger cells for better visibility"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Small/Compact Size</Text>
+        <CodeInput
+          length={6}
+          label="Compact Cells"
+          cellStyle={customCellStyles.smallCell}
+          focusCellStyle={customCellStyles.smallFocusCell}
+          textStyle={customCellStyles.smallText}
+          helperText="Smaller cells for space-efficient layout"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Elevated with Shadow</Text>
+        <CodeInput
+          length={4}
+          label="Shadow Effect"
+          cellStyle={customCellStyles.shadowCell}
+          focusCellStyle={customCellStyles.shadowFocusCell}
+          textStyle={customCellStyles.shadowText}
+          helperText="Cells with shadow for depth effect"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Outlined Style</Text>
+        <CodeInput
+          length={4}
+          label="Thick Borders"
+          cellStyle={customCellStyles.outlinedCell}
+          focusCellStyle={customCellStyles.outlinedFocusCell}
+          filledCellStyle={customCellStyles.outlinedFilledCell}
+          textStyle={customCellStyles.outlinedText}
+          helperText="Thick borders with transparent background"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Filled Style</Text>
+        <CodeInput
+          length={5}
+          label="Solid Background"
+          cellStyle={customCellStyles.filledCell}
+          focusCellStyle={customCellStyles.filledFocusCell}
+          filledCellStyle={customCellStyles.filledFilledCell}
+          textStyle={customCellStyles.filledText}
+          helperText="Solid backgrounds with subtle borders"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Minimalist Style</Text>
+        <CodeInput
+          length={6}
+          label="Clean & Minimal"
+          cellStyle={customCellStyles.minimalistCell}
+          focusCellStyle={customCellStyles.minimalistFocusCell}
+          textStyle={customCellStyles.minimalistText}
+          helperText="Clean, thin borders with light colors"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Bold/Heavy Style</Text>
+        <CodeInput
+          length={4}
+          label="Bold & Strong"
+          cellStyle={customCellStyles.boldCell}
+          focusCellStyle={customCellStyles.boldFocusCell}
+          filledCellStyle={customCellStyles.boldFilledCell}
+          textStyle={customCellStyles.boldText}
+          helperText="Thick borders with bold, strong appearance"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Custom Error State</Text>
+        <CodeInput
+          length={4}
+          label="Custom Validation"
+          value="12"
+          error
+          errorText="Custom red styling for errors"
+          cellStyle={customCellStyles.validationCell}
+          errorCellStyle={customCellStyles.customErrorCell}
+          textStyle={customCellStyles.validationText}
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Custom Success State</Text>
+        <CodeInput
+          length={4}
+          label="Custom Success"
+          value="1234"
+          success
+          helperText="Custom green styling for success"
+          cellStyle={customCellStyles.validationCell}
+          successCellStyle={customCellStyles.customSuccessCell}
+          textStyle={customCellStyles.validationText}
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Light Subtle Style (Figma Design)</Text>
+        <CodeInput
+          length={6}
+          label="Light & Subtle"
+          cellStyle={customCellStyles.figmaLightCell}
+          focusCellStyle={customCellStyles.figmaLightFocusCell}
+          filledCellStyle={customCellStyles.figmaLightFilledCell}
+          textStyle={customCellStyles.figmaLightText}
+          helperText="Light background with subtle 0.5px border"
+        />
+      </View>
+    </View>
+  )
+}
diff --git a/example/components/CodeInputDemo/BasicExamples.tsx b/example/components/CodeInputDemo/BasicExamples.tsx
new file mode 100644
index 0000000..f35e415
--- /dev/null
+++ b/example/components/CodeInputDemo/BasicExamples.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { CodeInput } from 'rn-base-component'
+import { demoStyles } from './styles'
+
+export const BasicExamples = () => {
+  return (
+    <View style={demoStyles.section}>
+      <Text style={demoStyles.sectionTitle}>📝 Basic Examples</Text>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Default with Label</Text>
+        <CodeInput length={4} label="PIN Code" helperText="Enter your 4-digit PIN" />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Required Field</Text>
+        <CodeInput
+          length={6}
+          label="Verification Code"
+          isRequire
+          helperText="This field is required"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Different Length (5 digits)</Text>
+        <CodeInput length={5} label="Security Code" placeholder="0" />
+      </View>
+    </View>
+  )
+}
diff --git a/example/components/CodeInputDemo/DisabledState.tsx b/example/components/CodeInputDemo/DisabledState.tsx
new file mode 100644
index 0000000..0d1d9f1
--- /dev/null
+++ b/example/components/CodeInputDemo/DisabledState.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { CodeInput } from 'rn-base-component'
+import { demoStyles } from './styles'
+
+export const DisabledState = () => {
+  return (
+    <View style={demoStyles.section}>
+      <Text style={demoStyles.sectionTitle}>🚫 Disabled State</Text>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Pre-filled Disabled Input</Text>
+        <CodeInput
+          length={6}
+          label="Submitted Code"
+          value="987654"
+          disabled
+          helperText="This code has already been submitted"
+        />
+      </View>
+    </View>
+  )
+}
diff --git a/example/components/CodeInputDemo/IconsAndComponents.tsx b/example/components/CodeInputDemo/IconsAndComponents.tsx
new file mode 100644
index 0000000..0468188
--- /dev/null
+++ b/example/components/CodeInputDemo/IconsAndComponents.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { CodeInput } from 'rn-base-component'
+import { demoStyles } from './styles'
+import { LockIcon, CheckIcon, ClearButton } from './utils'
+
+export const IconsAndComponents = () => {
+  return (
+    <View style={demoStyles.section}>
+      <Text style={demoStyles.sectionTitle}>🎨 Icons & Components</Text>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Left Icon Component</Text>
+        <CodeInput
+          length={4}
+          label="Secure PIN"
+          leftComponent={<LockIcon />}
+          secureTextEntry
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Right Icon Component</Text>
+        <CodeInput
+          length={6}
+          label="Verification Code"
+          value="123456"
+          rightComponent={<CheckIcon />}
+          success
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Both Left & Right Components</Text>
+        <CodeInput
+          length={4}
+          label="PIN Code"
+          leftComponent={<LockIcon />}
+          rightComponent={<ClearButton />}
+          helperText="Tap X to clear"
+        />
+      </View>
+    </View>
+  )
+}
diff --git a/example/components/CodeInputDemo/InteractivePlayground.tsx b/example/components/CodeInputDemo/InteractivePlayground.tsx
new file mode 100644
index 0000000..6f97200
--- /dev/null
+++ b/example/components/CodeInputDemo/InteractivePlayground.tsx
@@ -0,0 +1,94 @@
+import React, { useRef, useState } from 'react'
+import { Alert, Text, View } from 'react-native'
+import { Button, CodeInput, CodeInputRef } from 'rn-base-component'
+import { demoStyles } from './styles'
+
+export const InteractivePlayground = () => {
+  const playgroundRef = useRef<CodeInputRef>(null)
+  const [playgroundValue, setPlaygroundValue] = useState('')
+  const [hasError, setHasError] = useState(false)
+  const [hasSuccess, setHasSuccess] = useState(false)
+  const [isDisabled, setIsDisabled] = useState(false)
+  const [isSecure, setIsSecure] = useState(false)
+
+  const handlePlaygroundChange = (code: string) => {
+    setPlaygroundValue(code)
+  }
+
+  const handlePlaygroundSubmit = (code: string) => {
+    Alert.alert('Code Submitted', `You entered: ${code}`)
+    setHasSuccess(true)
+    setHasError(false)
+  }
+
+  const toggleError = () => {
+    setHasError(!hasError)
+    setHasSuccess(false)
+  }
+
+  const toggleSuccess = () => {
+    setHasSuccess(!hasSuccess)
+    setHasError(false)
+  }
+
+  const toggleDisabled = () => setIsDisabled(!isDisabled)
+  const toggleSecure = () => setIsSecure(!isSecure)
+
+  const clearInput = () => {
+    playgroundRef.current?.clear()
+    setPlaygroundValue('')
+    setHasError(false)
+    setHasSuccess(false)
+  }
+
+  const getCurrentValue = () => {
+    const value = playgroundRef.current?.getValue()
+    Alert.alert('Current Value', value || '(empty)')
+  }
+
+  return (
+    <View style={demoStyles.section}>
+      <Text style={demoStyles.sectionTitle}>🎮 Interactive Playground</Text>
+      <Text style={demoStyles.sectionDescription}>
+        Test different states and configurations
+      </Text>
+
+      <CodeInput
+        ref={playgroundRef}
+        length={6}
+        value={playgroundValue}
+        onChangeText={handlePlaygroundChange}
+        onSubmit={handlePlaygroundSubmit}
+        label="Verification Code"
+        helperText="Enter 6-digit code to test different states"
+        error={hasError}
+        errorText={hasError ? 'Invalid code. Please try again.' : undefined}
+        success={hasSuccess}
+        disabled={isDisabled}
+        secureTextEntry={isSecure}
+        autoFocus={false}
+      />
+
+      <View style={demoStyles.controlButtons}>
+        <Button onPress={toggleError} style={demoStyles.smallButton}>
+          {hasError ? 'Remove Error' : 'Show Error'}
+        </Button>
+        <Button onPress={toggleSuccess} style={demoStyles.smallButton}>
+          {hasSuccess ? 'Remove Success' : 'Show Success'}
+        </Button>
+        <Button onPress={toggleDisabled} style={demoStyles.smallButton}>
+          {isDisabled ? 'Enable' : 'Disable'}
+        </Button>
+        <Button onPress={toggleSecure} style={demoStyles.smallButton}>
+          {isSecure ? 'Show Text' : 'Hide Text'}
+        </Button>
+        <Button onPress={clearInput} style={demoStyles.smallButton}>
+          Clear
+        </Button>
+        <Button onPress={getCurrentValue} style={demoStyles.smallButton}>
+          Get Value
+        </Button>
+      </View>
+    </View>
+  )
+}
diff --git a/example/components/CodeInputDemo/SecurityAndStyling.tsx b/example/components/CodeInputDemo/SecurityAndStyling.tsx
new file mode 100644
index 0000000..0d958e1
--- /dev/null
+++ b/example/components/CodeInputDemo/SecurityAndStyling.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { CodeInput } from 'rn-base-component'
+import { demoStyles, customCellStyles } from './styles'
+
+export const SecurityAndStyling = () => {
+  return (
+    <View style={demoStyles.section}>
+      <Text style={demoStyles.sectionTitle}>🔐 Security & Styling</Text>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Secure Text Entry</Text>
+        <CodeInput
+          length={6}
+          label="Password"
+          secureTextEntry
+          helperText="Characters are hidden for security"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Placeholder as Dots</Text>
+        <CodeInput
+          length={6}
+          label="Code Entry"
+          placeholderAsDot
+          helperText="Empty cells show as dots"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Custom Placeholder</Text>
+        <CodeInput
+          length={4}
+          label="Custom Placeholder"
+          placeholder="*"
+          helperText="Custom placeholder character"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Custom Cell Styling</Text>
+        <CodeInput
+          length={4}
+          label="Styled Cells"
+          cellStyle={customCellStyles.customCell}
+          focusCellStyle={customCellStyles.customFocusCell}
+          textStyle={customCellStyles.customText}
+        />
+      </View>
+    </View>
+  )
+}
diff --git a/example/components/CodeInputDemo/ValidationStates.tsx b/example/components/CodeInputDemo/ValidationStates.tsx
new file mode 100644
index 0000000..d4e9182
--- /dev/null
+++ b/example/components/CodeInputDemo/ValidationStates.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { CodeInput } from 'rn-base-component'
+import { demoStyles } from './styles'
+
+export const ValidationStates = () => {
+  return (
+    <View style={demoStyles.section}>
+      <Text style={demoStyles.sectionTitle}>✓ Validation States</Text>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Success State</Text>
+        <CodeInput
+          length={6}
+          label="Verification Code"
+          value="123456"
+          success
+          helperText="Code verified successfully!"
+        />
+      </View>
+
+      <View style={demoStyles.example}>
+        <Text style={demoStyles.exampleTitle}>Error State</Text>
+        <CodeInput
+          length={6}
+          label="Verification Code"
+          value="1234"
+          error
+          errorText="Invalid code. Please check and try again."
+        />
+      </View>
+    </View>
+  )
+}
diff --git a/example/components/CodeInputDemo/index.tsx b/example/components/CodeInputDemo/index.tsx
new file mode 100644
index 0000000..28fb956
--- /dev/null
+++ b/example/components/CodeInputDemo/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { ScrollView, Text, View } from 'react-native'
+import { demoStyles } from './styles'
+import { InteractivePlayground } from './InteractivePlayground'
+import { BasicExamples } from './BasicExamples'
+import { ValidationStates } from './ValidationStates'
+import { IconsAndComponents } from './IconsAndComponents'
+import { SecurityAndStyling } from './SecurityAndStyling'
+import { AdvancedCellStyling } from './AdvancedCellStyling'
+import { DisabledState } from './DisabledState'
+import { AdditionalFeatures } from './AdditionalFeatures'
+
+export const CodeInputDemo = () => {
+  return (
+    <ScrollView style={demoStyles.container} contentContainerStyle={demoStyles.contentContainer}>
+      <Text style={demoStyles.mainTitle}>CodeInput Component Demo</Text>
+
+      <InteractivePlayground />
+      <BasicExamples />
+      <ValidationStates />
+      <IconsAndComponents />
+      <SecurityAndStyling />
+      <AdvancedCellStyling />
+      <DisabledState />
+      <AdditionalFeatures />
+
+      <View style={demoStyles.footer}>
+        <Text style={demoStyles.footerText}>🎯 Explore all CodeInput features above!</Text>
+      </View>
+    </ScrollView>
+  )
+}
diff --git a/example/components/CodeInputDemo/styles.ts b/example/components/CodeInputDemo/styles.ts
new file mode 100644
index 0000000..c849515
--- /dev/null
+++ b/example/components/CodeInputDemo/styles.ts
@@ -0,0 +1,384 @@
+import { StyleSheet } from 'react-native'
+import { demoColors } from '../../theme/demoColors'
+import { demoMetrics, componentMetrics } from '../../theme/demoMetrics'
+
+export const demoStyles = StyleSheet.create({
+  // Container styles
+  container: {
+    flex: 1,
+    backgroundColor: demoColors.backgroundLight,
+  },
+  contentContainer: {
+    padding: componentMetrics.containerPadding,
+    paddingBottom: componentMetrics.containerPaddingBottom,
+  },
+
+  // Header styles
+  mainTitle: {
+    fontSize: demoMetrics.fontSize.heading,
+    fontWeight: 'bold',
+    color: demoColors.textPrimary,
+    marginBottom: demoMetrics.margin.medium,
+    textAlign: 'center',
+  },
+
+  // Section styles
+  section: {
+    backgroundColor: demoColors.surface,
+    borderRadius: componentMetrics.sectionBorderRadius,
+    padding: componentMetrics.sectionPadding,
+    marginVertical: componentMetrics.sectionMargin,
+    shadowColor: demoColors.shadow,
+    ...demoMetrics.shadow.normal,
+  },
+  sectionTitle: {
+    fontSize: demoMetrics.fontSize.large,
+    fontWeight: '700',
+    color: demoColors.textDark,
+    marginBottom: demoMetrics.margin.small,
+  },
+  sectionDescription: {
+    fontSize: demoMetrics.fontSize.body,
+    color: demoColors.textSecondary,
+    marginBottom: demoMetrics.spacing.large,
+  },
+
+  // Example styles
+  example: {
+    marginVertical: demoMetrics.margin.normal,
+    paddingVertical: demoMetrics.padding.medium,
+    borderBottomWidth: demoMetrics.borderWidth.normal,
+    borderBottomColor: demoColors.borderLight,
+  },
+  exampleTitle: {
+    fontSize: demoMetrics.fontSize.subheading,
+    fontWeight: '600',
+    color: demoColors.textSecondary,
+    marginBottom: demoMetrics.margin.medium,
+  },
+
+  // Control buttons
+  controlButtons: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: demoMetrics.gap.small,
+    marginTop: demoMetrics.spacing.large,
+    justifyContent: 'center',
+  },
+  smallButton: {
+    paddingHorizontal: componentMetrics.buttonPaddingHorizontal,
+    paddingVertical: componentMetrics.buttonPaddingVertical,
+    minWidth: componentMetrics.buttonMinWidth,
+  },
+
+  // Footer styles
+  footer: {
+    marginTop: demoMetrics.margin.xlarge,
+    padding: demoMetrics.padding.large,
+    backgroundColor: demoColors.surface,
+    borderRadius: demoMetrics.borderRadius.large,
+    alignItems: 'center',
+  },
+  footerText: {
+    fontSize: demoMetrics.fontSize.normal,
+    color: demoColors.textSecondary,
+    textAlign: 'center',
+  },
+})
+
+// Custom cell styling examples
+export const customCellStyles = StyleSheet.create({
+  // Basic custom example
+  customCell: {
+    borderRadius: demoMetrics.borderRadius.large,
+    borderWidth: demoMetrics.borderWidth.thick,
+    borderColor: demoColors.blue,
+    backgroundColor: demoColors.blueLight,
+  },
+  customFocusCell: {
+    borderColor: demoColors.blueDark,
+    backgroundColor: demoColors.blueLighter,
+    transform: [{ scale: demoMetrics.scale.normal }],
+  },
+  customText: {
+    fontSize: demoMetrics.fontSize.xxlarge,
+    fontWeight: 'bold',
+    color: demoColors.textDark,
+  },
+
+  // Circular cells
+  circularCell: {
+    width: demoMetrics.cellSize.large,
+    height: demoMetrics.cellSize.large,
+    borderRadius: demoMetrics.borderRadius.round,
+    borderWidth: demoMetrics.borderWidth.thick,
+    borderColor: demoColors.purple,
+    backgroundColor: demoColors.purpleLight,
+  },
+  circularFocusCell: {
+    borderColor: demoColors.purpleDark,
+    backgroundColor: demoColors.purpleLighter,
+    transform: [{ scale: demoMetrics.scale.medium }],
+  },
+  circularFilledCell: {
+    borderColor: demoColors.purple,
+    backgroundColor: demoColors.purpleFilled,
+  },
+  circularText: {
+    fontSize: demoMetrics.fontSize.xlarge,
+    fontWeight: '600',
+    color: demoColors.purpleDark,
+  },
+
+  // Square cells
+  squareCell: {
+    width: demoMetrics.cellSize.large,
+    height: demoMetrics.cellSize.large,
+    borderRadius: 0,
+    borderWidth: demoMetrics.borderWidth.thick,
+    borderColor: demoColors.gray,
+    backgroundColor: demoColors.surface,
+  },
+  squareFocusCell: {
+    borderColor: demoColors.grayDark,
+    backgroundColor: demoColors.grayLight,
+    borderWidth: demoMetrics.borderWidth.xthick,
+  },
+  squareText: {
+    fontSize: demoMetrics.fontSize.xlarge,
+    fontWeight: '700',
+    color: demoColors.textDark,
+  },
+
+  // Gradient cells
+  gradientCell: {
+    width: demoMetrics.cellSize.medium,
+    height: demoMetrics.cellSize.medium,
+    borderRadius: demoMetrics.borderRadius.normal,
+    borderWidth: demoMetrics.borderWidth.thick,
+    borderColor: demoColors.orange,
+    backgroundColor: demoColors.orangeLight,
+  },
+  gradientFocusCell: {
+    borderColor: demoColors.orangeDark,
+    backgroundColor: demoColors.yellowLight,
+    transform: [{ scale: demoMetrics.scale.normal }],
+  },
+  gradientFilledCell: {
+    backgroundColor: demoColors.yellow,
+    borderColor: demoColors.orange,
+  },
+  gradientText: {
+    fontSize: demoMetrics.fontSize.large,
+    fontWeight: 'bold',
+    color: demoColors.orangeDark,
+  },
+
+  // Large cells
+  largeCell: {
+    width: demoMetrics.cellSize.xhuge,
+    height: demoMetrics.cellSize.xhuge,
+    borderRadius: demoMetrics.borderRadius.large,
+    borderWidth: demoMetrics.borderWidth.thick,
+    borderColor: demoColors.blue,
+    backgroundColor: demoColors.surface,
+  },
+  largeFocusCell: {
+    borderColor: demoColors.blueDark,
+    backgroundColor: demoColors.blueLight,
+    borderWidth: demoMetrics.borderWidth.xthick,
+  },
+  largeText: {
+    fontSize: demoMetrics.fontSize.heading,
+    fontWeight: 'bold',
+    color: demoColors.textDark,
+  },
+
+  // Small cells
+  smallCell: {
+    width: demoMetrics.cellSize.small,
+    height: demoMetrics.cellSize.small,
+    borderRadius: demoMetrics.borderRadius.small,
+    borderWidth: demoMetrics.borderWidth.medium,
+    borderColor: demoColors.teal,
+    backgroundColor: demoColors.surface,
+  },
+  smallFocusCell: {
+    borderColor: demoColors.tealLight,
+    backgroundColor: demoColors.tealLighter,
+    borderWidth: demoMetrics.borderWidth.thick,
+  },
+  smallText: {
+    fontSize: demoMetrics.fontSize.normal,
+    fontWeight: '600',
+    color: demoColors.teal,
+  },
+
+  // Shadow cells
+  shadowCell: {
+    width: demoMetrics.cellSize.xlarge,
+    height: demoMetrics.cellSize.xlarge,
+    borderRadius: demoMetrics.borderRadius.normal,
+    borderWidth: demoMetrics.borderWidth.normal,
+    borderColor: demoColors.grayBorder,
+    backgroundColor: demoColors.surface,
+    shadowColor: demoColors.shadow,
+    ...demoMetrics.shadow.medium,
+  },
+  shadowFocusCell: {
+    borderColor: demoColors.blue,
+    backgroundColor: demoColors.surface,
+    shadowColor: demoColors.shadowBlue,
+    ...demoMetrics.shadow.large,
+  },
+  shadowText: {
+    fontSize: demoMetrics.fontSize.large,
+    fontWeight: '600',
+    color: demoColors.textSecondary,
+  },
+
+  // Outlined cells
+  outlinedCell: {
+    width: demoMetrics.cellSize.large,
+    height: demoMetrics.cellSize.large,
+    borderRadius: demoMetrics.borderRadius.medium,
+    borderWidth: demoMetrics.borderWidth.xthick,
+    borderColor: demoColors.green,
+    backgroundColor: demoColors.transparent,
+  },
+  outlinedFocusCell: {
+    borderColor: demoColors.greenDark,
+    borderWidth: demoMetrics.borderWidth.xxthick,
+    transform: [{ scale: demoMetrics.scale.normal }],
+  },
+  outlinedFilledCell: {
+    borderColor: demoColors.green,
+    backgroundColor: demoColors.greenLight,
+  },
+  outlinedText: {
+    fontSize: demoMetrics.fontSize.xlarge,
+    fontWeight: 'bold',
+    color: demoColors.green,
+  },
+
+  // Filled cells
+  filledCell: {
+    width: demoMetrics.cellSize.medium,
+    height: demoMetrics.cellSize.medium,
+    borderRadius: demoMetrics.borderRadius.normal,
+    borderWidth: demoMetrics.borderWidth.normal,
+    borderColor: demoColors.blueFilled,
+    backgroundColor: demoColors.blueLighter,
+  },
+  filledFocusCell: {
+    borderColor: demoColors.blue,
+    backgroundColor: demoColors.blueActive,
+    borderWidth: demoMetrics.borderWidth.thick,
+  },
+  filledFilledCell: {
+    backgroundColor: demoColors.blueFilled,
+    borderColor: demoColors.blue,
+  },
+  filledText: {
+    fontSize: demoMetrics.fontSize.large,
+    fontWeight: '600',
+    color: demoColors.blueText,
+  },
+
+  // Minimalist cells
+  minimalistCell: {
+    width: demoMetrics.cellSize.normal,
+    height: demoMetrics.cellSize.normal,
+    borderRadius: demoMetrics.borderRadius.medium,
+    borderWidth: demoMetrics.borderWidth.normal,
+    borderColor: demoColors.grayPlaceholder,
+    backgroundColor: demoColors.surface,
+  },
+  minimalistFocusCell: {
+    borderColor: demoColors.grayBorder,
+    backgroundColor: demoColors.surfaceHover,
+  },
+  minimalistText: {
+    fontSize: demoMetrics.fontSize.medium,
+    fontWeight: '400',
+    color: demoColors.grayText,
+  },
+
+  // Bold cells
+  boldCell: {
+    width: demoMetrics.cellSize.xxlarge,
+    height: demoMetrics.cellSize.xxlarge,
+    borderRadius: demoMetrics.borderRadius.medium,
+    borderWidth: demoMetrics.borderWidth.xxthick,
+    borderColor: demoColors.red,
+    backgroundColor: demoColors.surface,
+  },
+  boldFocusCell: {
+    borderColor: demoColors.error,
+    backgroundColor: demoColors.redLight,
+    borderWidth: demoMetrics.borderWidth.xxxthick,
+    transform: [{ scale: demoMetrics.scale.small }],
+  },
+  boldFilledCell: {
+    borderColor: demoColors.red,
+    backgroundColor: demoColors.redFilled,
+  },
+  boldText: {
+    fontSize: demoMetrics.fontSize.title,
+    fontWeight: '900',
+    color: demoColors.red,
+  },
+
+  // Validation cells
+  validationCell: {
+    width: demoMetrics.cellSize.large,
+    height: demoMetrics.cellSize.large,
+    borderRadius: demoMetrics.borderRadius.normal,
+    borderWidth: demoMetrics.borderWidth.thick,
+    borderColor: demoColors.grayBorder,
+    backgroundColor: demoColors.surface,
+  },
+  customErrorCell: {
+    borderColor: demoColors.errorBorder,
+    borderWidth: demoMetrics.borderWidth.xthick,
+    backgroundColor: demoColors.errorLight,
+    transform: [{ scale: demoMetrics.scale.normal }],
+  },
+  customSuccessCell: {
+    borderColor: demoColors.successBorder,
+    borderWidth: demoMetrics.borderWidth.xthick,
+    backgroundColor: demoColors.successLight,
+    transform: [{ scale: demoMetrics.scale.normal }],
+  },
+  validationText: {
+    fontSize: demoMetrics.fontSize.large,
+    fontWeight: '600',
+    color: demoColors.textSecondary,
+  },
+
+  // Figma light cells
+  figmaLightCell: {
+    width: demoMetrics.cellSize.tiny,
+    height: demoMetrics.cellSize.tiny,
+    borderRadius: demoMetrics.borderRadius.tiny + 0.5,
+    borderWidth: demoMetrics.borderWidth.thin,
+    borderColor: demoColors.figmaLight,
+    backgroundColor: 'rgba(250, 250, 249, 0.7)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  figmaLightFocusCell: {
+    borderColor: demoColors.figmaLightBorder,
+    borderWidth: demoMetrics.borderWidth.normal,
+    backgroundColor: demoColors.figmaLight,
+  },
+  figmaLightFilledCell: {
+    borderColor: demoColors.figmaLightFilled,
+    backgroundColor: demoColors.figmaLight,
+  },
+  figmaLightText: {
+    fontSize: demoMetrics.fontSize.normal,
+    fontWeight: '500',
+    color: demoColors.figmaLightText,
+  },
+})
diff --git a/example/components/CodeInputDemo/utils.tsx b/example/components/CodeInputDemo/utils.tsx
new file mode 100644
index 0000000..2c196f4
--- /dev/null
+++ b/example/components/CodeInputDemo/utils.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { demoColors } from '../../theme/demoColors'
+import { demoMetrics } from '../../theme/demoMetrics'
+
+// Icon Components for demos
+export const LockIcon = () => (
+  <View style={styles.iconContainer}>
+    <Text style={styles.icon}>🔒</Text>
+  </View>
+)
+
+export const CheckIcon = () => (
+  <View style={styles.iconContainer}>
+    <Text style={styles.icon}>✓</Text>
+  </View>
+)
+
+export const ClearButton = () => (
+  <View style={styles.iconContainer}>
+    <Text style={styles.icon}>✕</Text>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  iconContainer: {
+    width: demoMetrics.iconSize.xlarge,
+    height: demoMetrics.iconSize.xlarge,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: demoColors.iconBackground,
+    borderRadius: demoMetrics.borderRadius.medium,
+    marginHorizontal: demoMetrics.spacing.tiny,
+  },
+  icon: {
+    fontSize: demoMetrics.fontSize.large,
+  },
+})
diff --git a/example/constants/components.ts b/example/constants/components.ts
new file mode 100644
index 0000000..4fd9eff
--- /dev/null
+++ b/example/constants/components.ts
@@ -0,0 +1,139 @@
+/**
+ * Component Library Demo Constants
+ * List of all components available in the demo app
+ */
+
+export interface ComponentItem {
+  id: string
+  name: string
+  description: string
+  route?: string
+  icon: string
+  category: 'Input' | 'Display' | 'Navigation' | 'Feedback'
+  status: 'Complete' | 'Coming Soon'
+}
+
+export const COMPONENTS: ComponentItem[] = [
+  {
+    id: 'code-input',
+    name: 'CodeInput',
+    description: 'Verification code input with multiple styling options',
+    route: '/code-input',
+    icon: '🔢',
+    category: 'Input',
+    status: 'Complete',
+  },
+  {
+    id: 'text-input',
+    name: 'TextInput',
+    description: 'Text input fields with flat and outlined variants',
+    icon: '📝',
+    category: 'Input',
+    status: 'Coming Soon',
+  },
+  {
+    id: 'button',
+    name: 'Button',
+    description: 'Various button styles and variants',
+    icon: '🔘',
+    category: 'Input',
+    status: 'Coming Soon',
+  },
+  {
+    id: 'checkbox',
+    name: 'Checkbox',
+    description: 'Checkboxes with customizable styles',
+    icon: '☑️',
+    category: 'Input',
+    status: 'Coming Soon',
+  },
+  {
+    id: 'radio-button',
+    name: 'RadioButton',
+    description: 'Radio button selections',
+    icon: '🔘',
+    category: 'Input',
+    status: 'Coming Soon',
+  },
+  {
+    id: 'slider',
+    name: 'Slider',
+    description: 'Range and fixed sliders',
+    icon: '🎚️',
+    category: 'Input',
+    status: 'Coming Soon',
+  },
+  {
+    id: 'card',
+    name: 'Card',
+    description: 'Card container component',
+    icon: '🃏',
+    category: 'Display',
+    status: 'Coming Soon',
+  },
+  {
+    id: 'text',
+    name: 'Text',
+    description: 'Themed text component',
+    icon: '📄',
+    category: 'Display',
+    status: 'Coming Soon',
+  },
+  {
+    id: 'typography',
+    name: 'Typography',
+    description: 'Typography styles and variants',
+    icon: '✍️',
+    category: 'Display',
+    status: 'Coming Soon',
+  },
+  {
+    id: 'icon',
+    name: 'Icon',
+    description: 'Icon component system',
+    icon: '⭐',
+    category: 'Display',
+    status: 'Coming Soon',
+  },
+  {
+    id: 'accordion',
+    name: 'Accordion',
+    description: 'Expandable accordion panels',
+    icon: '📋',
+    category: 'Navigation',
+    status: 'Coming Soon',
+  },
+  {
+    id: 'progress',
+    name: 'Progress',
+    description: 'Progress indicators and bars',
+    icon: '📊',
+    category: 'Feedback',
+    status: 'Coming Soon',
+  },
+  {
+    id: 'countdown',
+    name: 'CountDown',
+    description: 'Countdown timer component',
+    icon: '⏱️',
+    category: 'Feedback',
+    status: 'Coming Soon',
+  },
+]
+
+// Helper functions
+export const getComponentById = (id: string): ComponentItem | undefined => {
+  return COMPONENTS.find(component => component.id === id)
+}
+
+export const getComponentsByCategory = (category: ComponentItem['category']): ComponentItem[] => {
+  return COMPONENTS.filter(component => component.category === category)
+}
+
+export const getCompletedComponents = (): ComponentItem[] => {
+  return COMPONENTS.filter(component => component.status === 'Complete')
+}
+
+export const getComponentsByStatus = (status: ComponentItem['status']): ComponentItem[] => {
+  return COMPONENTS.filter(component => component.status === status)
+}
diff --git a/example/theme/demoColors.ts b/example/theme/demoColors.ts
new file mode 100644
index 0000000..a4a13a7
--- /dev/null
+++ b/example/theme/demoColors.ts
@@ -0,0 +1,132 @@
+/**
+ * Demo App Color System
+ * All colors used in the component demo application
+ */
+
+export const demoColors = {
+  // Primary Colors
+  primary: '#3b82f6',
+  primaryLight: '#60a5fa',
+  primaryDark: '#2563eb',
+  primaryBackground: '#eff6ff',
+  primaryBackgroundLight: '#f0f9ff',
+
+  // Text Colors
+  textPrimary: '#1a1a1a',
+  textSecondary: '#64748b',
+  textTertiary: '#94a3b8',
+  textDark: '#1e293b',
+  textLight: '#ffffff',
+
+  // Background Colors
+  background: '#f5f7fa',
+  backgroundLight: '#f8f9fa',
+  surface: '#ffffff',
+  surfaceHover: '#fafafa',
+
+  // Border Colors
+  border: '#e2e8f0',
+  borderLight: '#f1f5f9',
+  borderDark: '#cbd5e1',
+
+  // Status Colors
+  success: '#10b981',
+  successLight: '#d5f4e6',
+  successBorder: '#27ae60',
+  error: '#e74c3c',
+  errorLight: '#fadbd8',
+  errorBorder: '#e74c3c',
+  warning: '#f39c12',
+  warningLight: '#fff8e1',
+  info: '#3498db',
+
+  // Component Specific Colors
+  // Purple theme
+  purple: '#9b59b6',
+  purpleDark: '#8e44ad',
+  purpleLight: '#f8f3ff',
+  purpleLighter: '#f0e6ff',
+  purpleFilled: '#e8d5f5',
+
+  // Gray theme
+  gray: '#95a5a6',
+  grayDark: '#7f8c8d',
+  grayLight: '#ecf0f1',
+  grayLighter: '#f5f5f5',
+  grayBorder: '#bdc3c7',
+  grayText: '#5d6d7e',
+  grayPlaceholder: '#d5d8dc',
+
+  // Orange/Yellow theme
+  orange: '#f39c12',
+  orangeDark: '#e67e22',
+  orangeLight: '#fff8e1',
+  yellow: '#ffd54f',
+  yellowLight: '#ffe082',
+
+  // Blue theme
+  blue: '#3498db',
+  blueDark: '#2980b9',
+  blueLight: '#ebf5fb',
+  blueLighter: '#d6eaf8',
+  blueFilled: '#5dade2',
+  blueActive: '#aed6f1',
+  blueText: '#21618c',
+
+  // Teal/Green theme
+  teal: '#16a085',
+  tealLight: '#1abc9c',
+  tealLighter: '#e8f8f5',
+  green: '#27ae60',
+  greenDark: '#229954',
+  greenLight: '#eafaf1',
+
+  // Red theme
+  red: '#c0392b',
+  redLight: '#fadbd8',
+  redFilled: '#f5b7b1',
+
+  // Figma Light Style
+  figmaLight: '#FAFAF9',
+  figmaLightBorder: '#E5E5E5',
+  figmaLightFilled: '#E0E0E0',
+  figmaLightText: '#333333',
+
+  // Shadow Colors
+  shadow: '#000',
+  shadowBlue: '#3498db',
+  shadowDark: '#040A01',
+
+  // Icon/Badge Colors
+  iconBackground: '#ecf0f1',
+  badgeBackground: '#f1f5f9',
+
+  // Transparent
+  transparent: 'transparent',
+}
+
+// Color aliases for semantic usage
+export const semanticColors = {
+  // Text
+  heading: demoColors.textPrimary,
+  body: demoColors.textSecondary,
+  caption: demoColors.textTertiary,
+
+  // Backgrounds
+  screen: demoColors.background,
+  card: demoColors.surface,
+
+  // Interactions
+  active: demoColors.primary,
+  hover: demoColors.surfaceHover,
+  disabled: demoColors.grayLight,
+
+  // Status
+  success: demoColors.success,
+  error: demoColors.error,
+  warning: demoColors.warning,
+  info: demoColors.info,
+}
+
+export type DemoColors = typeof demoColors
+export type SemanticColors = typeof semanticColors
diff --git a/example/theme/demoMetrics.ts b/example/theme/demoMetrics.ts
new file mode 100644
index 0000000..eb2027c
--- /dev/null
+++ b/example/theme/demoMetrics.ts
@@ -0,0 +1,210 @@
+/**
+ * Demo App Metrics System
+ * All spacing, sizing, and dimension values used in the component demo application
+ */
+
+export const demoMetrics = {
+  // Spacing Scale
+  spacing: {
+    tiny: 4,
+    small: 8,
+    medium: 12,
+    normal: 16,
+    large: 20,
+    xlarge: 24,
+    xxlarge: 30,
+    xxxlarge: 40,
+  },
+
+  // Padding Scale
+  padding: {
+    tiny: 4,
+    small: 8,
+    medium: 12,
+    normal: 16,
+    large: 20,
+    xlarge: 24,
+  },
+
+  // Margin Scale
+  margin: {
+    tiny: 4,
+    small: 8,
+    medium: 10,
+    normal: 15,
+    large: 20,
+    xlarge: 30,
+  },
+
+  // Border Radius
+  borderRadius: {
+    tiny: 4,
+    small: 6,
+    medium: 8,
+    normal: 10,
+    large: 12,
+    xlarge: 14,
+    xxlarge: 16,
+    round: 25,
+  },
+
+  // Border Width
+  borderWidth: {
+    thin: 0.5,
+    normal: 1,
+    medium: 1.5,
+    thick: 2,
+    xthick: 3,
+    xxthick: 4,
+    xxxthick: 5,
+  },
+
+  // Font Sizes
+  fontSize: {
+    tiny: 11,
+    small: 12,
+    caption: 13,
+    body: 14,
+    subheading: 15,
+    normal: 16,
+    medium: 18,
+    large: 20,
+    xlarge: 22,
+    xxlarge: 24,
+    title: 26,
+    heading: 28,
+    hero: 32,
+  },
+
+  // Icon Sizes
+  iconSize: {
+    tiny: 16,
+    small: 20,
+    normal: 24,
+    medium: 28,
+    large: 32,
+    xlarge: 40,
+    xxlarge: 48,
+    huge: 56,
+  },
+
+  // Cell/Input Sizes (for CodeInput)
+  cellSize: {
+    tiny: 36,
+    small: 38,
+    compact: 40,
+    normal: 45,
+    medium: 48,
+    large: 50,
+    xlarge: 52,
+    xxlarge: 55,
+    huge: 60,
+    xhuge: 65,
+  },
+
+  // Button/Control Heights
+  controlHeight: {
+    small: 32,
+    normal: 40,
+    medium: 44,
+    large: 48,
+    xlarge: 52,
+  },
+
+  // Shadow
+  shadow: {
+    small: {
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.08,
+      shadowRadius: 4,
+      elevation: 2,
+    },
+    normal: {
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.08,
+      shadowRadius: 8,
+      elevation: 3,
+    },
+    medium: {
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.2,
+      shadowRadius: 6,
+      elevation: 5,
+    },
+    large: {
+      shadowOffset: { width: 0, height: 6 },
+      shadowOpacity: 0.35,
+      shadowRadius: 8,
+      elevation: 8,
+    },
+    glass: {
+      shadowOffset: { width: 0, height: 6 },
+      shadowOpacity: 0.1,
+      shadowRadius: 32,
+      elevation: 8,
+    },
+  },
+
+  // Opacity
+  opacity: {
+    disabled: 0.5,
+    dimmed: 0.6,
+    faded: 0.7,
+    translucent: 0.8,
+  },
+
+  // Line Height
+  lineHeight: {
+    tight: 20,
+    normal: 24,
+    relaxed: 28,
+  },
+
+  // Gap (for flex/grid)
+  gap: {
+    tiny: 4,
+    small: 8,
+    medium: 12,
+    normal: 16,
+  },
+
+  // Scale transforms
+  scale: {
+    small: 1.03,
+    normal: 1.05,
+    medium: 1.08,
+  },
+}
+
+// Metric aliases for specific use cases
+export const componentMetrics = {
+  // Card
+  cardPadding: demoMetrics.padding.large,
+  cardBorderRadius: demoMetrics.borderRadius.xxlarge,
+  cardGap: demoMetrics.gap.medium,
+
+  // Button
+  buttonMinWidth: 100,
+  buttonPaddingHorizontal: demoMetrics.padding.medium,
+  buttonPaddingVertical: demoMetrics.padding.small,
+
+  // Icon Container
+  iconContainerSize: demoMetrics.iconSize.xlarge,
+  iconContainerPadding: demoMetrics.padding.tiny,
+
+  // Section
+  sectionPadding: demoMetrics.padding.large,
+  sectionMargin: demoMetrics.margin.medium,
+  sectionBorderRadius: demoMetrics.borderRadius.large,
+
+  // Container
+  containerPadding: demoMetrics.padding.large,
+  containerPaddingBottom: demoMetrics.padding.xlarge,
+
+  // Stats
+  statDividerWidth: 1,
+  statDividerMargin: demoMetrics.spacing.normal,
+}
+
+export type DemoMetrics = typeof demoMetrics
+export type ComponentMetrics = typeof componentMetrics

From 65ae822a969a27de0eca931cac0f673a446d6075 Mon Sep 17 00:00:00 2001
From: "hang.nguyen" <hang.nguyen@saigontechnology.com>
Date: Wed, 1 Oct 2025 15:24:34 +0700
Subject: [PATCH 04/13] feat: figma code connect with base components

---
 code-connect/.env.example                     |    1 +
 code-connect/.gitignore                       |   41 +
 code-connect/components/Accordion.figma.tsx   |   68 +
 code-connect/components/Button.figma.tsx      |   65 +
 code-connect/components/Checkbox.figma.tsx    |   71 +
 code-connect/components/CodeInput.figma.tsx   |   28 +
 code-connect/components/Progress.figma.tsx    |   48 +
 code-connect/components/RadioButton.figma.tsx |   95 ++
 code-connect/components/Slider.figma.tsx      |   48 +
 code-connect/components/TextInput.figma.tsx   |   83 ++
 code-connect/components/Typography.figma.tsx  |   13 +
 code-connect/figma.config.json                |   22 +
 code-connect/package.json                     |   34 +
 code-connect/yarn.lock                        | 1284 +++++++++++++++++
 14 files changed, 1901 insertions(+)
 create mode 100644 code-connect/.env.example
 create mode 100644 code-connect/.gitignore
 create mode 100644 code-connect/components/Accordion.figma.tsx
 create mode 100644 code-connect/components/Button.figma.tsx
 create mode 100644 code-connect/components/Checkbox.figma.tsx
 create mode 100644 code-connect/components/CodeInput.figma.tsx
 create mode 100644 code-connect/components/Progress.figma.tsx
 create mode 100644 code-connect/components/RadioButton.figma.tsx
 create mode 100644 code-connect/components/Slider.figma.tsx
 create mode 100644 code-connect/components/TextInput.figma.tsx
 create mode 100644 code-connect/components/Typography.figma.tsx
 create mode 100644 code-connect/figma.config.json
 create mode 100644 code-connect/package.json
 create mode 100644 code-connect/yarn.lock

diff --git a/code-connect/.env.example b/code-connect/.env.example
new file mode 100644
index 0000000..111a4ed
--- /dev/null
+++ b/code-connect/.env.example
@@ -0,0 +1 @@
+FIGMA_ACCESS_TOKEN=
\ No newline at end of file
diff --git a/code-connect/.gitignore b/code-connect/.gitignore
new file mode 100644
index 0000000..516c25f
--- /dev/null
+++ b/code-connect/.gitignore
@@ -0,0 +1,41 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build output
+dist/
+build/
+lib/
+
+# TypeScript
+*.tsbuildinfo
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# But keep example file
+!.env.example
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+logs
+*.log
+
+# Cache
+.eslintcache
+.cache/
diff --git a/code-connect/components/Accordion.figma.tsx b/code-connect/components/Accordion.figma.tsx
new file mode 100644
index 0000000..67d773c
--- /dev/null
+++ b/code-connect/components/Accordion.figma.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {Accordion, Icon, Typography} from 'rn-base-component'
+import {StyleSheet, View} from 'react-native'
+
+const ACCORDION_FIGMA_URL = '<FIGMA_ACCORDION>'
+
+const accordionProps = {
+  title: figma.string('label_text'),
+  expandMultiple: figma.enum('state', {
+    expand: true,
+    collapse: false,
+    disabled: false,
+  }),
+  leadingIcon: figma.boolean('leading_icon', {
+    true: <Icon source={require('@/assets/images/leading_icon.png')} />,
+    false: undefined,
+  }),
+  trailingIcon: figma.boolean('trailing_icon', {
+    true: <Icon source={require('@/assets/images/trailing_icon.png')} />,
+    false: undefined,
+  }),
+  groupButtons: figma.boolean('group_buttons', {
+    true: figma.children('button'),
+    false: undefined,
+  }),
+  onPress: () => {
+    /* TODO: Handle onPress */
+  },
+}
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    flexDirection: 'row',
+  },
+  headerContent: {
+    flexDirection: 'row',
+  },
+})
+
+figma.connect(Accordion, ACCORDION_FIGMA_URL, {
+  props: accordionProps,
+  example: ({trailingIcon, leadingIcon, groupButtons, title, ...props}) => (
+    <Accordion
+      {...props}
+      title={title}
+      sections={[
+        {
+          title,
+          content: 'Lorem ipsum dolor sit amet',
+        },
+      ]}
+      renderHeader={(item, _, __, keyExtractorItem) => (
+        <View style={styles.headerContent} key={keyExtractorItem}>
+          {leadingIcon}
+          <Typography variant="bold">{item.title}</Typography>
+          {trailingIcon}
+        </View>
+      )}
+      renderContent={item => (
+        <View>
+          <Typography variant="regular">{item.content}</Typography>
+          <View style={styles.buttonContainer}>{groupButtons}</View>
+        </View>
+      )}
+    />
+  ),
+})
diff --git a/code-connect/components/Button.figma.tsx b/code-connect/components/Button.figma.tsx
new file mode 100644
index 0000000..9f695f0
--- /dev/null
+++ b/code-connect/components/Button.figma.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {
+  Button,
+  ButtonPrimary,
+  ButtonSecondary,
+  ButtonOutline,
+  ButtonTransparent,
+  Icon,
+} from 'rn-base-component'
+
+const BUTTON_FIGMA_URL = '<FIGMA_BUTTON>'
+const buttonProps = {
+  disabled: figma.enum('state', {
+    disabled: true,
+  }),
+  leftIcon: figma.boolean('leading_icon', {
+    true: figma.boolean('is_icon_only', {
+      true: undefined,
+      false: <Icon source={require('@/assets/images/leading_icon.png')} />,
+    }),
+    false: undefined,
+  }),
+  rightIcon: figma.boolean('trailing_icon', {
+    true: figma.boolean('is_icon_only', {
+      true: undefined,
+      false: <Icon source={require('@/assets/images/trailing_icon.png')} />,
+    }),
+    false: undefined,
+  }),
+  children: figma.boolean('is_icon_only', {
+    true: <Icon source={require('@/assets/images/icon.png')} />,
+    false: figma.string('button_text'),
+  }),
+}
+
+figma.connect(ButtonPrimary, BUTTON_FIGMA_URL, {
+  variant: {type: 'contained', style: 'primary'},
+  props: buttonProps,
+  example: props => <ButtonPrimary {...props} />,
+})
+
+figma.connect(ButtonSecondary, BUTTON_FIGMA_URL, {
+  variant: {type: 'contained', style: 'secondary'},
+  props: buttonProps,
+  example: props => <ButtonSecondary {...props} />,
+})
+
+figma.connect(ButtonOutline, BUTTON_FIGMA_URL, {
+  variant: {type: 'outlined'},
+  props: buttonProps,
+  example: props => <ButtonOutline {...props} />,
+})
+
+figma.connect(ButtonTransparent, BUTTON_FIGMA_URL, {
+  variant: {type: 'ghost'},
+  props: buttonProps,
+  example: props => <ButtonTransparent {...props} />,
+})
+
+figma.connect(Button, BUTTON_FIGMA_URL, {
+  variant: {type: 'link'},
+  props: buttonProps,
+  example: props => <Button {...props} />,
+})
diff --git a/code-connect/components/Checkbox.figma.tsx b/code-connect/components/Checkbox.figma.tsx
new file mode 100644
index 0000000..5d07331
--- /dev/null
+++ b/code-connect/components/Checkbox.figma.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {Checkbox, theme, Typography} from 'rn-base-component'
+import {StyleSheet, View} from 'react-native'
+import {metrics} from 'src/helpers'
+
+const CHECKBOX_FIGMA_URL = '<FIGMA_CHECKBOX>'
+const CHECKBOXES_FIGMA_URL = '<FIGMA_CHECKBOXES>'
+
+const checkboxProps = {
+  isChecked: figma.boolean('checked'),
+  label: figma.boolean('label', {
+    true: figma.string('label_text'),
+    false: undefined,
+  }),
+  disabled: figma.enum('state', {
+    disabled: true,
+  }),
+  fillColor: theme.colors.primary,
+  unfillColor: theme.colors.transparent,
+  checkMarkColor: theme.colors.white,
+  disabledText: theme.colors.gray,
+  borderRadius: metrics.borderRadius,
+  onChange: () => {
+    /* TODO: Handle onChange */
+  },
+}
+
+figma.connect(Checkbox, CHECKBOX_FIGMA_URL, {
+  props: checkboxProps,
+  example: props => <Checkbox {...props} />,
+})
+
+figma.connect(Checkbox, CHECKBOX_FIGMA_URL, {
+  variant: {required: true},
+  props: checkboxProps,
+  example: ({label, ...props}) => (
+    <Checkbox
+      {...props}
+      textComponent={
+        <Typography style={styles.labelText}>
+          {label}
+          <Typography style={styles.requiredAsterisk}> *</Typography>
+        </Typography>
+      }
+    />
+  ),
+})
+
+figma.connect(Checkbox, CHECKBOXES_FIGMA_URL, {
+  props: {
+    checkboxes: figma.children('checkbox'),
+  },
+  example: ({checkboxes}) => <View style={styles.container}>{checkboxes}</View>,
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    gap: metrics.medium,
+  },
+  labelText: {
+    fontSize: metrics.small,
+    color: theme.colors.gray,
+  },
+  requiredAsterisk: {
+    color: theme.colors.error,
+    fontSize: metrics.small,
+    fontWeight: 'bold',
+  },
+})
diff --git a/code-connect/components/CodeInput.figma.tsx b/code-connect/components/CodeInput.figma.tsx
new file mode 100644
index 0000000..d8979e5
--- /dev/null
+++ b/code-connect/components/CodeInput.figma.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {CodeInput} from 'rn-base-component'
+
+const CODE_INPUTS_FIGMA_URL = '<FIGMA_CODE_INPUTS>'
+
+const codeInputProps = {
+  placeholderAsDot: true,
+  withCursor: true,
+  secureTextEntry: true,
+  onChange: () => {
+    /* TODO: Handle onChange */
+  },
+  onSubmit: () => {
+    /* TODO: Handle onSubmit */
+  },
+  onClear: () => {
+    /* TODO: Handle onClear */
+  },
+}
+
+figma.connect(CodeInput, CODE_INPUTS_FIGMA_URL, {
+  props: {
+    ...codeInputProps,
+    length: figma.children('otp_input').props.length,
+  },
+  example: props => <CodeInput {...props} />,
+})
diff --git a/code-connect/components/Progress.figma.tsx b/code-connect/components/Progress.figma.tsx
new file mode 100644
index 0000000..82df186
--- /dev/null
+++ b/code-connect/components/Progress.figma.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {Progress, theme, Typography} from 'rn-base-component'
+import {metrics} from 'src/helpers'
+import {StyleSheet, View} from 'react-native'
+
+const PROGRESS_LINEAR_FIGMA_URL = '<FIGMA_PROGRESS_LINEAR>'
+
+figma.connect(Progress, PROGRESS_LINEAR_FIGMA_URL, {
+  props: {
+    value: 75,
+    borderRadius: metrics.small,
+    filledTrackColor: theme.colors.primary,
+    backgroundColor: theme.colors.gray,
+    width: 400,
+    // Defines progress mode
+    isIndeterminateProgress: true,
+  },
+  example: props => <Progress {...props} />,
+})
+
+// Example Progress with label text
+figma.connect(Progress, PROGRESS_LINEAR_FIGMA_URL, {
+  variant: {progress_label: true},
+  props: {
+    label: figma.string('progress_label_text'),
+    value: 75,
+    borderRadius: metrics.small,
+    filledTrackColor: theme.colors.primary,
+    backgroundColor: theme.colors.gray,
+    width: 400,
+    isIndeterminateProgress: true,
+  },
+  example: ({label, ...progressProps}) => (
+    <View style={styles.container}>
+      <Progress {...progressProps} />
+      <Typography variant="regular">{label}</Typography>
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: metrics.small,
+  },
+})
diff --git a/code-connect/components/RadioButton.figma.tsx b/code-connect/components/RadioButton.figma.tsx
new file mode 100644
index 0000000..6915249
--- /dev/null
+++ b/code-connect/components/RadioButton.figma.tsx
@@ -0,0 +1,95 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {RadioButton, theme, Typography} from 'rn-base-component'
+import {metrics} from 'src/helpers'
+import {StyleSheet, View} from 'react-native'
+
+const RADIO_BUTTON_FIGMA_URL = '<FIGMA_RADIO_BUTTON>'
+const HORIZONTAL_RADIO_BUTTONS_FIGMA_URL = '<FIGMA_HORIZONTAL_RADIO_BUTTONS>'
+const VERTICAL_RADIO_BUTTONS_FIGMA_URL = '<FIGMA_VERTICAL_RADIO_BUTTONS>'
+
+const styles = StyleSheet.create({
+  labelText: {
+    fontSize: metrics.small,
+    color: theme.colors.gray,
+  },
+  requiredAsterisk: {
+    color: theme.colors.error,
+    fontSize: metrics.small,
+    fontWeight: 'bold',
+  },
+  verticalWrapper: {
+    flexDirection: 'column',
+  },
+  horizontalWrapper: {
+    flexDirection: 'row',
+  },
+})
+
+const radioButtonProps = {
+  value: figma.enum('state', {
+    checked: true,
+    disabled: false,
+    default: false,
+  }),
+  label: figma.boolean('label', {
+    true: figma.string('label_text'),
+    false: undefined,
+  }),
+  disabled: figma.enum('state', {
+    disabled: true,
+  }),
+  outerSize: metrics.medium,
+  innerSize: metrics.small,
+  ringColor: theme.colors.gray,
+  innerBackgroundColor: theme.colors.primary,
+  wrapperStyle: figma.enum('type', {
+    horizontal: undefined,
+    vertical: styles.verticalWrapper,
+  }),
+  onPressButton: () => {
+    /* TODO: Handle onPressButton */
+  },
+}
+
+figma.connect(RadioButton, RADIO_BUTTON_FIGMA_URL, {
+  props: radioButtonProps,
+  example: props => <RadioButton {...props} />,
+})
+
+// label with required asterisk
+figma.connect(RadioButton, RADIO_BUTTON_FIGMA_URL, {
+  variant: {required: true, label: true},
+  props: radioButtonProps,
+  example: ({label, ...props}) => (
+    <RadioButton
+      {...props}
+      textComponent={
+        <Typography style={styles.labelText}>
+          {label}
+          <Typography style={styles.requiredAsterisk}> *</Typography>
+        </Typography>
+      }
+    />
+  ),
+})
+
+// horizontal layout with required asterisk
+figma.connect(RadioButton, HORIZONTAL_RADIO_BUTTONS_FIGMA_URL, {
+  props: {
+    alignmentStyle: figma.enum('alignment', {
+      horizontal: styles.horizontalWrapper,
+      vertical: styles.verticalWrapper,
+    }),
+    radioButtons: figma.children('radio_button'),
+  },
+  example: ({alignmentStyle, radioButtons}) => <View style={alignmentStyle}>{radioButtons}</View>,
+})
+
+// vertical layout with required asterisk
+figma.connect(RadioButton, VERTICAL_RADIO_BUTTONS_FIGMA_URL, {
+  props: {
+    radioButtons: figma.children('radio_button'),
+  },
+  example: ({radioButtons}) => <View style={styles.horizontalWrapper}>{radioButtons}</View>,
+})
diff --git a/code-connect/components/Slider.figma.tsx b/code-connect/components/Slider.figma.tsx
new file mode 100644
index 0000000..6d0102f
--- /dev/null
+++ b/code-connect/components/Slider.figma.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {Icon, Slider, SliderFixed, SliderFixedRange, SliderRange} from 'rn-base-component'
+
+const SLIDER_FIGMA_URL = '<FIGMA_SLIDER>'
+const sliderProps = {
+  sliderWidth: 400,
+  thumbComponent: <Icon source={require('@/assets/images/thumb.png')} />,
+  onValueChange: () => {
+    /* TODO: Handle onValueChange */
+  },
+}
+
+const sliderRangeProps = {
+  sliderWidth: 400,
+  leftThumbComponent: <Icon source={require('@/assets/images/left.png')} />,
+  rightThumbComponent: <Icon source={require('@/assets/images/right.png')} />,
+  onValueChange: () => {
+    /* TODO: Handle onValueChange */
+  },
+}
+
+figma.connect(Slider, SLIDER_FIGMA_URL, {
+  variant: {type: 'value'},
+  props: sliderProps,
+  example: props => <Slider {...props} />,
+})
+
+figma.connect(SliderRange, SLIDER_FIGMA_URL, {
+  variant: {type: 'range'},
+  props: sliderRangeProps,
+  example: props => <SliderRange minimumValue={0} maximumValue={100} {...props} />,
+})
+
+figma.connect(SliderFixed, SLIDER_FIGMA_URL, {
+  variant: {type: 'with_marks'},
+  props: {
+    ...sliderProps,
+    step: 4,
+  },
+  example: props => <SliderFixed {...props} />,
+})
+
+figma.connect(SliderFixedRange, SLIDER_FIGMA_URL, {
+  variant: {type: '2-side marks'},
+  props: sliderRangeProps,
+  example: ({...rest}) => <SliderFixedRange minimumValue={0} maximumValue={100} {...rest} />,
+})
diff --git a/code-connect/components/TextInput.figma.tsx b/code-connect/components/TextInput.figma.tsx
new file mode 100644
index 0000000..72f5f6e
--- /dev/null
+++ b/code-connect/components/TextInput.figma.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {Icon, TextInput, theme} from 'rn-base-component'
+import {StyleSheet} from 'react-native'
+
+const TEXT_INPUT_FIGMA_URL = '<FIGMA_TEXT_INPUT>'
+
+const styles = StyleSheet.create({
+  errorTextProps: {
+    color: theme.colors.error,
+  },
+  helperTextProps: {
+    color: theme.colors.gray,
+  },
+})
+
+const textInputProps = {
+  label: figma.boolean('label', {
+    true: figma.string('label_value'),
+    false: undefined,
+  }),
+  placeholder: figma.boolean('placeholder', {
+    true: figma.string('placeholder_value'),
+    false: undefined,
+  }),
+  isRequire: figma.boolean('required'),
+  value: figma.string('label_value'),
+  editable: figma.enum('state', {
+    default: true,
+    active: true,
+    disabled: false,
+    error: true,
+  }),
+  rightComponent: figma.boolean('trailing_icon', {
+    true: <Icon source={require('@/assets/images/trailing_icon.png')} />,
+    false: undefined,
+  }),
+  errorText: figma.boolean('helper_text', {
+    true: figma.string('helper_text_value'),
+    false: undefined,
+  }),
+  errorProps: figma.enum('state', {
+    default: {
+      style: styles.helperTextProps,
+    },
+    active: {
+      style: styles.helperTextProps,
+    },
+    disabled: {
+      style: styles.helperTextProps,
+    },
+    error: {
+      style: styles.errorTextProps,
+    },
+  }),
+  onFocus: () => {
+    /* TODO: Handle onFocus */
+  },
+  onBlur: () => {
+    /* TODO: Handle onBlur */
+  },
+  onChangeText: () => {
+    /* TODO: Handle onChangeText */
+  },
+}
+
+figma.connect(TextInput, TEXT_INPUT_FIGMA_URL, {
+  variant: {style: 'filled'},
+  props: textInputProps,
+  example: props => <TextInput {...props} />,
+})
+
+figma.connect(TextInput.Flat, TEXT_INPUT_FIGMA_URL, {
+  variant: {style: 'floating'},
+  props: textInputProps,
+  example: props => <TextInput.Flat {...props} />,
+})
+
+figma.connect(TextInput.Outlined, TEXT_INPUT_FIGMA_URL, {
+  variant: {style: 'outline'},
+  props: textInputProps,
+  example: props => <TextInput.Outlined {...props} />,
+})
diff --git a/code-connect/components/Typography.figma.tsx b/code-connect/components/Typography.figma.tsx
new file mode 100644
index 0000000..13277ec
--- /dev/null
+++ b/code-connect/components/Typography.figma.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {Typography, theme} from 'rn-base-component'
+
+const TYPOGRAPHY_FIGMA_URL = '<FIGMA_TYPOGRAPHY>'
+
+figma.connect(Typography, TYPOGRAPHY_FIGMA_URL, {
+  props: {
+    children: figma.string('title_text'),
+    color: theme.colors.darkText,
+  },
+  example: props => <Typography {...props} />,
+})
diff --git a/code-connect/figma.config.json b/code-connect/figma.config.json
new file mode 100644
index 0000000..44603cc
--- /dev/null
+++ b/code-connect/figma.config.json
@@ -0,0 +1,22 @@
+{
+  "codeConnect": {
+    "include": ["components/*.figma.tsx"],
+    "label": "React Native",
+    "parser": "react",
+    "interactiveSetupFigmaFileUrl": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=0-1",
+    "documentUrlSubstitutions": {
+      "<FIGMA_BUTTON>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=8-148",
+      "<FIGMA_SLIDER>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=503-11083",
+      "<FIGMA_TEXT_INPUT>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=20-55977",
+      "<FIGMA_CODE_INPUTS>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=141-10638",
+      "<FIGMA_CHECKBOX>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=701-12729",
+      "<FIGMA_CHECKBOXES>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=701-12833",
+      "<FIGMA_RADIO_BUTTON>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=701-12848",
+      "<FIGMA_HORIZONTAL_RADIO_BUTTONS>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=701-13153",
+      "<FIGMA_VERTICAL_RADIO_BUTTONS>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=701-13179",
+      "<FIGMA_PROGRESS_LINEAR>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=709-2582",
+      "<FIGMA_TYPOGRAPHY>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=3-63",
+      "<FIGMA_ACCORDION>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=773-10315"
+    }
+  }
+}
diff --git a/code-connect/package.json b/code-connect/package.json
new file mode 100644
index 0000000..e5d0745
--- /dev/null
+++ b/code-connect/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@rn-base-component/code-connect",
+  "version": "0.1.0",
+  "description": "Figma Code Connect integration for RN Base Component library",
+  "private": true,
+  "files": [
+    "components",
+    "figma.config.json"
+  ],
+  "scripts": {
+    "connect": "figma connect publish"
+  },
+  "keywords": [
+    "figma",
+    "code-connect",
+    "react-native",
+    "design-system",
+    "components"
+  ],
+  "author": "React Native Team <SaiGon Technology Solutions>",
+  "license": "MIT",
+  "dependencies": {
+    "@figma/code-connect": "^1.3.5",
+    "rn-base-component": "file:../"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "react": "18.2.0",
+    "typescript": "^4.5.2"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  }
+}
diff --git a/code-connect/yarn.lock b/code-connect/yarn.lock
new file mode 100644
index 0000000..e83dc81
--- /dev/null
+++ b/code-connect/yarn.lock
@@ -0,0 +1,1284 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@asamuzakjp/css-color@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@asamuzakjp/css-color/-/css-color-3.2.0.tgz#cc42f5b85c593f79f1fa4f25d2b9b321e61d1794"
+  integrity sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==
+  dependencies:
+    "@csstools/css-calc" "^2.1.3"
+    "@csstools/css-color-parser" "^3.0.9"
+    "@csstools/css-parser-algorithms" "^3.0.4"
+    "@csstools/css-tokenizer" "^3.0.3"
+    lru-cache "^10.4.3"
+
+"@csstools/color-helpers@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@csstools/color-helpers/-/color-helpers-5.1.0.tgz#106c54c808cabfd1ab4c602d8505ee584c2996ef"
+  integrity sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==
+
+"@csstools/css-calc@^2.1.3", "@csstools/css-calc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@csstools/css-calc/-/css-calc-2.1.4.tgz#8473f63e2fcd6e459838dd412401d5948f224c65"
+  integrity sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==
+
+"@csstools/css-color-parser@^3.0.9":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz#4e386af3a99dd36c46fef013cfe4c1c341eed6f0"
+  integrity sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==
+  dependencies:
+    "@csstools/color-helpers" "^5.1.0"
+    "@csstools/css-calc" "^2.1.4"
+
+"@csstools/css-parser-algorithms@^3.0.4":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz#5755370a9a29abaec5515b43c8b3f2cf9c2e3076"
+  integrity sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==
+
+"@csstools/css-tokenizer@^3.0.3":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz#333fedabc3fd1a8e5d0100013731cf19e6a8c5d3"
+  integrity sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==
+
+"@fastify/busboy@^2.0.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.1.1.tgz#b9da6a878a371829a0502c9b6c1c143ef6663f4d"
+  integrity sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==
+
+"@figma/code-connect@^1.3.5":
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/@figma/code-connect/-/code-connect-1.3.5.tgz#2c3fb19b9b885f1d2d2a7a42da21fac5db421e36"
+  integrity sha512-/oTdGJB/jz23DEYxjHYs8EUWcC1653FKniYdM7KyHkELnQ5qpdFZCGxgJzuGjIsEN6t0z0xNV6ZYwKwlqdPz9Q==
+  dependencies:
+    boxen "5.1.1"
+    chalk "^4.1.2"
+    commander "^11.1.0"
+    compare-versions "^6.1.0"
+    cross-spawn "^7.0.3"
+    dotenv "^16.3.1"
+    fast-fuzzy "^1.12.0"
+    find-up "^5.0.0"
+    glob "^10.3.10"
+    jsdom "^24.1.1"
+    lodash "^4.17.21"
+    minimatch "^9.0.3"
+    ora "^5.4.1"
+    parse5 "^7.1.2"
+    prettier "^2.8.8"
+    prompts "^2.4.2"
+    strip-ansi "^6.0.0"
+    ts-morph "^23.0.0"
+    typescript "5.5.4"
+    undici "^5.29.0"
+    zod "3.25.58"
+    zod-validation-error "^3.2.0"
+
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@ts-morph/common@~0.24.0":
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/@ts-morph/common/-/common-0.24.0.tgz#9125b3d5ef9e2633cd6a54296b420b89366599c1"
+  integrity sha512-c1xMmNHWpNselmpIqursHeOHHBTIsJLbB+NuovbTTRCNiTLEr/U9dbJ8qy0jd/O2x5pc3seWuOUN5R2IoOTp8A==
+  dependencies:
+    fast-glob "^3.3.2"
+    minimatch "^9.0.4"
+    mkdirp "^3.0.1"
+    path-browserify "^1.0.1"
+
+"@types/prop-types@*":
+  version "15.7.15"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.15.tgz#e6e5a86d602beaca71ce5163fadf5f95d70931c7"
+  integrity sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==
+
+"@types/react@^18.0.26":
+  version "18.3.24"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.24.tgz#f6a5a4c613242dfe3af0dcee2b4ec47b92d9b6bd"
+  integrity sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
+agent-base@^7.1.0, agent-base@^7.1.2:
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.4.tgz#e3cd76d4c548ee895d3c3fd8dc1f6c5b9032e7a8"
+  integrity sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==
+
+ansi-align@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
+  integrity sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==
+  dependencies:
+    string-width "^4.1.0"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.2.2.tgz#60216eea464d864597ce2832000738a0589650c1"
+  integrity sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^6.1.0:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.3.tgz#c044d5dcc521a076413472597a1acb1f103c4041"
+  integrity sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+bl@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
+  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
+  dependencies:
+    buffer "^5.5.0"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
+boxen@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.1.tgz#4faca6a437885add0bf8d99082e272d480814cd4"
+  integrity sha512-JtIQYts08AFAYGF4eSh3pUt3NQkYV/e75pRtQmAVTLNWR/1L7Bsswxlgzgk8nmLEM+gFszsIlA9BgD3XnSqp3g==
+  dependencies:
+    ansi-align "^3.0.0"
+    camelcase "^6.2.0"
+    chalk "^4.1.0"
+    cli-boxes "^2.2.1"
+    string-width "^4.2.2"
+    type-fest "^0.20.2"
+    widest-line "^3.1.0"
+    wrap-ansi "^7.0.0"
+
+brace-expansion@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.2.tgz#54fc53237a613d854c7bd37463aad17df87214e7"
+  integrity sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+buffer@^5.5.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
+
+call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz#4b5428c222be985d79c3d82657479dbe0b59b2d6"
+  integrity sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
+camelcase@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
+chalk@^4.1.0, chalk@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+cli-boxes@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
+  integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
+
+cli-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
+  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
+  dependencies:
+    restore-cursor "^3.1.0"
+
+cli-spinners@^2.5.0:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.2.tgz#1773a8f4b9c4d6ac31563df53b3fc1d79462fe41"
+  integrity sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==
+
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
+
+code-block-writer@^13.0.1:
+  version "13.0.3"
+  resolved "https://registry.yarnpkg.com/code-block-writer/-/code-block-writer-13.0.3.tgz#90f8a84763a5012da7af61319dd638655ae90b5b"
+  integrity sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-11.1.0.tgz#62fdce76006a68e5c1ab3314dc92e800eb83d906"
+  integrity sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==
+
+compare-versions@^6.1.0:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-6.1.1.tgz#7af3cc1099ba37d244b3145a9af5201b629148a9"
+  integrity sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==
+
+cross-spawn@^7.0.3, cross-spawn@^7.0.6:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+cssstyle@^4.0.1:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-4.6.0.tgz#ea18007024e3167f4f105315f3ec2d982bf48ed9"
+  integrity sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==
+  dependencies:
+    "@asamuzakjp/css-color" "^3.2.0"
+    rrweb-cssom "^0.8.0"
+
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
+data-urls@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-5.0.0.tgz#2f76906bce1824429ffecb6920f45a0b30f00dde"
+  integrity sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==
+  dependencies:
+    whatwg-mimetype "^4.0.0"
+    whatwg-url "^14.0.0"
+
+debug@4, debug@^4.3.4:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
+  integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
+  dependencies:
+    ms "^2.1.3"
+
+decimal.js@^10.4.3:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.6.0.tgz#e649a43e3ab953a72192ff5983865e509f37ed9a"
+  integrity sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==
+
+defaults@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.4.tgz#b0b02062c1e2aa62ff5d9528f0f98baa90978d7a"
+  integrity sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==
+  dependencies:
+    clone "^1.0.2"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+dotenv@^16.3.1:
+  version "16.6.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.6.1.tgz#773f0e69527a8315c7285d5ee73c4459d20a8020"
+  integrity sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==
+
+dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+entities@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-6.0.1.tgz#c28c34a43379ca7f61d074130b2f5f7020a30694"
+  integrity sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==
+
+es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-object-atoms@^1.0.0, es-object-atoms@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
+  integrity sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
+  dependencies:
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+eslint-plugin-ft-flow@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-ft-flow/-/eslint-plugin-ft-flow-2.0.3.tgz#3b3c113c41902bcbacf0e22b536debcfc3c819e8"
+  integrity sha512-Vbsd/b+LYA99jUbsL6viEUWShFaYQt2YQs3QN3f+aeszOhh2sgdcU0mjzDyD4yyBvMc8qy2uwvBBWfMzEX06tg==
+  dependencies:
+    lodash "^4.17.21"
+    string-natural-compare "^3.0.1"
+
+fast-fuzzy@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/fast-fuzzy/-/fast-fuzzy-1.12.0.tgz#f900a8165bffbb7dd5c013a1bb96ee22179ba406"
+  integrity sha512-sXxGgHS+ubYpsdLnvOvJ9w5GYYZrtL9mkosG3nfuD446ahvoWEsSKBP7ieGmWIKVLnaxRDgUJkZMdxRgA2Ni+Q==
+  dependencies:
+    graphemesplit "^2.4.1"
+
+fast-glob@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818"
+  integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.8"
+
+fastq@^1.6.0:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.19.1.tgz#d50eaba803c8846a883c16492821ebcd2cda55f5"
+  integrity sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==
+  dependencies:
+    reusify "^1.0.4"
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+foreground-child@^3.1.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.1.tgz#32e8e9ed1b68a3497befb9ac2b6adf92a638576f"
+  integrity sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==
+  dependencies:
+    cross-spawn "^7.0.6"
+    signal-exit "^4.0.1"
+
+form-data@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.4.tgz#784cdcce0669a9d68e94d11ac4eea98088edd2c4"
+  integrity sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    es-set-tostringtag "^2.1.0"
+    hasown "^2.0.2"
+    mime-types "^2.1.12"
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+get-intrinsic@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz#743f0e3b6964a93a5491ed1bffaae054d7f98d01"
+  integrity sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==
+  dependencies:
+    call-bind-apply-helpers "^1.0.2"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    function-bind "^1.1.2"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
+get-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
+glob-parent@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^10.3.10:
+  version "10.4.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
+gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
+graphemesplit@^2.4.1:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/graphemesplit/-/graphemesplit-2.6.0.tgz#548ec986e83dcdfec31adf5c98b282985077ce46"
+  integrity sha512-rG9w2wAfkpg0DILa1pjnjNfucng3usON360shisqIMUBw/87pojcBSrHmeE4UwryAuBih7g8m1oilf5/u8EWdQ==
+  dependencies:
+    js-base64 "^3.6.0"
+    unicode-trie "^2.0.0"
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-symbols@^1.0.3, has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
+has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+html-encoding-sniffer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz#696df529a7cfd82446369dc5193e590a3735b448"
+  integrity sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==
+  dependencies:
+    whatwg-encoding "^3.1.1"
+
+http-proxy-agent@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz#9a8b1f246866c028509486585f62b8f2c18c270e"
+  integrity sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==
+  dependencies:
+    agent-base "^7.1.0"
+    debug "^4.3.4"
+
+https-proxy-agent@^7.0.5:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz#da8dfeac7da130b05c2ba4b59c9b6cd66611a6b9"
+  integrity sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==
+  dependencies:
+    agent-base "^7.1.2"
+    debug "4"
+
+iconv-lite@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
+ieee754@^1.1.13:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+inherits@^2.0.3, inherits@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-glob@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-interactive@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
+  integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-potential-custom-element-name@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
+  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
+
+is-unicode-supported@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7"
+  integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+js-base64@^3.6.0:
+  version "3.7.8"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.8.tgz#af44496bc09fa178ed9c4adf67eb2b46f5c6d2a4"
+  integrity sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==
+
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+jsdom@^24.1.1:
+  version "24.1.3"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-24.1.3.tgz#88e4a07cb9dd21067514a619e9f17b090a394a9f"
+  integrity sha512-MyL55p3Ut3cXbeBEG7Hcv0mVM8pp8PBNWxRqchZnSfAiES1v1mRnMeFfaHWIPULpwsYfvO+ZmMZz5tGCnjzDUQ==
+  dependencies:
+    cssstyle "^4.0.1"
+    data-urls "^5.0.0"
+    decimal.js "^10.4.3"
+    form-data "^4.0.0"
+    html-encoding-sniffer "^4.0.0"
+    http-proxy-agent "^7.0.2"
+    https-proxy-agent "^7.0.5"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.12"
+    parse5 "^7.1.2"
+    rrweb-cssom "^0.7.1"
+    saxes "^6.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.1.4"
+    w3c-xmlserializer "^5.0.0"
+    webidl-conversions "^7.0.0"
+    whatwg-encoding "^3.1.1"
+    whatwg-mimetype "^4.0.0"
+    whatwg-url "^14.0.0"
+    ws "^8.18.0"
+    xml-name-validator "^5.0.0"
+
+kleur@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+log-symbols@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
+  integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
+  dependencies:
+    chalk "^4.1.0"
+    is-unicode-supported "^0.1.0"
+
+loose-envify@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lru-cache@^10.2.0, lru-cache@^10.4.3:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
+merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
+minimatch@^9.0.3, minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+
+mkdirp@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-3.0.1.tgz#e44e4c5607fb279c168241713cc6e0fea9adcb50"
+  integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==
+
+ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+nwsapi@^2.2.12:
+  version "2.2.22"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.22.tgz#109f9530cda6c156d6a713cdf5939e9f0de98b9d"
+  integrity sha512-ujSMe1OWVn55euT1ihwCI1ZcAaAU3nxUiDwfDQldc51ZXaB9m2AyOn6/jh1BLe2t/G8xd6uKG1UBF2aZJeg2SQ==
+
+onetime@^5.1.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+ora@^5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-5.4.1.tgz#1b2678426af4ac4a509008e5e4ac9e9959db9e18"
+  integrity sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==
+  dependencies:
+    bl "^4.1.0"
+    chalk "^4.1.0"
+    cli-cursor "^3.1.0"
+    cli-spinners "^2.5.0"
+    is-interactive "^1.0.0"
+    is-unicode-supported "^0.1.0"
+    log-symbols "^4.1.0"
+    strip-ansi "^6.0.0"
+    wcwidth "^1.0.1"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+package-json-from-dist@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
+  integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
+
+pako@^0.2.5:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+  integrity sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==
+
+parse5@^7.1.2:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.3.0.tgz#d7e224fa72399c7a175099f45fc2ad024b05ec05"
+  integrity sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==
+  dependencies:
+    entities "^6.0.0"
+
+path-browserify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
+  integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+prettier@^2.8.8:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+
+prompts@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
+  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
+psl@^1.1.33:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.15.0.tgz#bdace31896f1d97cec6a79e8224898ce93d974c6"
+  integrity sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==
+  dependencies:
+    punycode "^2.3.1"
+
+punycode@^2.1.1, punycode@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
+
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+react@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
+readable-stream@^3.4.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
+restore-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
+  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
+  dependencies:
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+
+reusify@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.1.0.tgz#0fe13b9522e1473f51b558ee796e08f11f9b489f"
+  integrity sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==
+
+"rn-base-component@file:..":
+  version "0.4.0"
+  dependencies:
+    eslint-plugin-ft-flow "^2.0.3"
+
+rrweb-cssom@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz#c73451a484b86dd7cfb1e0b2898df4b703183e4b"
+  integrity sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==
+
+rrweb-cssom@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz#3021d1b4352fbf3b614aaeed0bc0d5739abe0bc2"
+  integrity sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+"safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+saxes@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5"
+  integrity sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==
+  dependencies:
+    xmlchars "^2.2.0"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+signal-exit@^3.0.2:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+sisteransi@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
+string-natural-compare@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
+  integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
+
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.2:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.2.tgz#132875abde678c7ea8d691533f2e7e22bb744dba"
+  integrity sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+symbol-tree@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
+
+tiny-inflate@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
+  integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+tough-cookie@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"
+  integrity sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
+
+tr46@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-5.1.1.tgz#96ae867cddb8fdb64a49cc3059a8d428bcf238ca"
+  integrity sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==
+  dependencies:
+    punycode "^2.3.1"
+
+ts-morph@^23.0.0:
+  version "23.0.0"
+  resolved "https://registry.yarnpkg.com/ts-morph/-/ts-morph-23.0.0.tgz#601d74edd1d24247e312b9fa5d147bdc659bff15"
+  integrity sha512-FcvFx7a9E8TUe6T3ShihXJLiJOiqyafzFKUO4aqIHDUCIvADdGNShcbc2W5PMr3LerXRv7mafvFZ9lRENxJmug==
+  dependencies:
+    "@ts-morph/common" "~0.24.0"
+    code-block-writer "^13.0.1"
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+typescript@5.5.4:
+  version "5.5.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
+  integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
+
+typescript@^4.5.2:
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+
+undici@^5.29.0:
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/undici/-/undici-5.29.0.tgz#419595449ae3f2cdcba3580a2e8903399bd1f5a3"
+  integrity sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==
+  dependencies:
+    "@fastify/busboy" "^2.0.0"
+
+unicode-trie@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-trie/-/unicode-trie-2.0.0.tgz#8fd8845696e2e14a8b67d78fa9e0dd2cad62fec8"
+  integrity sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==
+  dependencies:
+    pako "^0.2.5"
+    tiny-inflate "^1.0.0"
+
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+
+url-parse@^1.5.3:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
+util-deprecate@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+w3c-xmlserializer@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz#f925ba26855158594d907313cedd1476c5967f6c"
+  integrity sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==
+  dependencies:
+    xml-name-validator "^5.0.0"
+
+wcwidth@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
+  integrity sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==
+  dependencies:
+    defaults "^1.0.3"
+
+webidl-conversions@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
+  integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
+
+whatwg-encoding@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz#d0f4ef769905d426e1688f3e34381a99b60b76e5"
+  integrity sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==
+  dependencies:
+    iconv-lite "0.6.3"
+
+whatwg-mimetype@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz#bc1bf94a985dc50388d54a9258ac405c3ca2fc0a"
+  integrity sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==
+
+whatwg-url@^14.0.0:
+  version "14.2.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-14.2.0.tgz#4ee02d5d725155dae004f6ae95c73e7ef5d95663"
+  integrity sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==
+  dependencies:
+    tr46 "^5.1.0"
+    webidl-conversions "^7.0.0"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+widest-line@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-3.1.0.tgz#8292333bbf66cb45ff0de1603b136b7ae1496eca"
+  integrity sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==
+  dependencies:
+    string-width "^4.0.0"
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
+ws@^8.18.0:
+  version "8.18.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.3.tgz#b56b88abffde62791c639170400c93dcb0c95472"
+  integrity sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==
+
+xml-name-validator@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-5.0.0.tgz#82be9b957f7afdacf961e5980f1bf227c0bf7673"
+  integrity sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==
+
+xmlchars@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zod-validation-error@^3.2.0:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.5.3.tgz#85ba33290200d8db9f043621e284f40dddefb7e5"
+  integrity sha512-OT5Y8lbUadqVZCsnyFaTQ4/O2mys4tj7PqhdbBCp7McPwvIEKfPtdA6QfPeFQK2/Rz5LgwmAXRJTugBNBi0btw==
+
+zod@3.25.58:
+  version "3.25.58"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.25.58.tgz#7cd680cbbf01d0994cd2e943a08dc7e77c6d2b7a"
+  integrity sha512-DVLmMQzSZwNYzQoMaM3MQWnxr2eq+AtM9Hx3w1/Yl0pH8sLTSjN4jGP7w6f7uand6Hw44tsnSu1hz1AOA6qI2Q==

From 39ce1fb49b27d47cb9538280ec0085da6739133d Mon Sep 17 00:00:00 2001
From: "hang.nguyen" <hang.nguyen@saigontechnology.com>
Date: Thu, 2 Oct 2025 13:16:28 +0700
Subject: [PATCH 05/13] feat: add document guideline figma code connect

---
 .../docs/Code_Connect_Integration_Guide.md    | 1275 +++++++++++++++++
 .../Mobile_Figma_Variables_Setup_Guide.md     | 1150 +++++++++++++++
 2 files changed, 2425 insertions(+)
 create mode 100644 code-connect/docs/Code_Connect_Integration_Guide.md
 create mode 100644 code-connect/docs/Mobile_Figma_Variables_Setup_Guide.md

diff --git a/code-connect/docs/Code_Connect_Integration_Guide.md b/code-connect/docs/Code_Connect_Integration_Guide.md
new file mode 100644
index 0000000..a5bed90
--- /dev/null
+++ b/code-connect/docs/Code_Connect_Integration_Guide.md
@@ -0,0 +1,1275 @@
+# Code Connect Integration Guide for Figma MCP
+
+This document provides comprehensive instructions for using Figma Code Connect with MCP to ensure AI always reuses existing components when generating code from Figma designs.
+
+## Table of Contents
+
+1. [What is Code Connect?](#1-what-is-code-connect)
+2. [Code Connect Workflow](#2-code-connect-workflow)
+3. [Mandatory Rules](#3-mandatory-rules)
+4. [Usage Examples](#4-usage-examples)
+5. [Integration with Theme System](#5-integration-with-theme-system)
+
+---
+
+## 1. What is Code Connect?
+
+**Code Connect** is a Figma feature that links design components to their actual code implementations in your codebase. This allows AI to generate code that uses your existing components instead of creating everything from scratch.
+
+### 1.1 Benefits
+
+- ✅ **Reuse existing components** instead of duplicating code
+- ✅ **Maintain consistency** across the codebase
+- ✅ **Reduce code generation errors** by referencing actual implementations
+- ✅ **Speed up development** by leveraging pre-built components
+- ✅ **Ensure design-code alignment** automatically
+- ✅ **Prevent component duplication** and code bloat
+- ✅ **Preserve established patterns** and best practices
+
+### 1.2 How It Works
+
+1. Designers link Figma components to code files in your repository
+2. When AI generates code from Figma, it checks for Code Connect mappings
+3. If a mapping exists, AI uses the linked component instead of generating new code
+4. AI only generates custom code for elements without Code Connect mappings
+
+---
+
+## 2. Code Connect Workflow
+
+### 2.1 Complete Workflow Diagram
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                  Start: Figma Design Selected               │
+└────────────────────────┬────────────────────────────────────┘
+                         │
+                         ▼
+┌─────────────────────────────────────────────────────────────┐
+│            Step 1: Extract Node ID from Figma URL           │
+│  URL: https://figma.com/design/xxx?node-id=123-456         │
+│  Node ID: 123:456                                           │
+└────────────────────────┬────────────────────────────────────┘
+                         │
+                         ▼
+┌─────────────────────────────────────────────────────────────┐
+│       Step 2: Run get_code_connect_map MCP Command          │
+│  mcp_Figma_get_code_connect_map({                          │
+│    nodeId: "123:456",                                       │
+│    clientLanguages: "typescript",                           │
+│    clientFrameworks: "react"                                │
+│  })                                                         │
+└────────────────────────┬────────────────────────────────────┘
+                         │
+                         ▼
+┌─────────────────────────────────────────────────────────────┐
+│   Step 2.5: 🚨 ANALYZE RESPONSE - CREATE MAPPING TABLE 🚨   │
+│                                                             │
+│  For EACH node in response:                                │
+│    - Node ID: 123:456                                       │
+│    - Has mapping? YES/NO                                    │
+│    - Component: ButtonPrimary                               │
+│    - Source: rn-base-component                              │
+│    - Action: MUST REUSE (do not generate custom)           │
+│                                                             │
+│  ⚠️ STOP: Review this table before writing ANY code        │
+└────────────────────────┬────────────────────────────────────┘
+                         │
+                         ▼
+                    ┌────────┐
+                    │  Does  │
+                    │  Code  │───Yes───┐
+                    │Connect │         │
+                    │ Exist? │         │
+                    └────┬───┘         │
+                         │             │
+                        No             │
+                         │             │
+                         ▼             ▼
+        ┌────────────────────┐  ┌─────────────────────┐
+        │   PATH A:          │  │   PATH B:           │
+        │ Generate New Code  │  │ Use Code Connect    │
+        │                    │  │ (🚨 MANDATORY 🚨)   │
+        └────────┬───────────┘  └──────┬──────────────┘
+                 │                     │
+                 ▼                     ▼
+     ┌──────────────────────┐  ┌────────────────────────┐
+     │ Run get_code MCP     │  │ 🚨 MANDATORY:          │
+     │ Get raw Figma code   │  │ Read Component File    │
+     └──────────┬───────────┘  │ Understand props/API   │
+                │               └──────┬─────────────────┘
+                ▼                     │
+     ┌──────────────────────┐        ▼
+     │ Apply Theme Mapping  │  ┌────────────────────────┐
+     │ Replace hardcoded    │  │ 🚨 MANDATORY:          │
+     │ values with tokens   │  │ Map Figma Props to     │
+     └──────────┬───────────┘  │ Component Props        │
+                │               └──────┬─────────────────┘
+                ▼                     │
+     ┌──────────────────────┐        ▼
+     │ Use StyleSheet       │  ┌────────────────────────┐
+     │ No inline styles     │  │ 🚨 MANDATORY:          │
+     └──────────┬───────────┘  │ Import Component       │
+                │               │ Use exact path & name  │
+                │               │ NO custom generation!  │
+                │               └──────┬─────────────────┘
+                │                     │
+                └──────────┬──────────┘
+                           │
+                           ▼
+                ┌──────────────────────┐
+                │ Apply Theme Tokens   │
+                │ to container styles  │
+                └──────────┬───────────┘
+                           │
+                           ▼
+                ┌──────────────────────┐
+                │ ⚠️ FINAL CHECK:      │
+                │ Did I use ALL Code   │
+                │ Connect components?  │
+                └──────────┬───────────┘
+                           │
+                           ▼
+                ┌──────────────────────┐
+                │   Code Generated     │
+                └──────────────────────┘
+```
+
+**🚨 CRITICAL STEP 2.5 - NEVER SKIP THIS:**
+
+After getting Code Connect response, ALWAYS create this table:
+
+| Node ID | Has Mapping? | Component Name | Source            | Action                     |
+| ------- | ------------ | -------------- | ----------------- | -------------------------- |
+| 85:439  | ✅ YES       | ButtonPrimary  | rn-base-component | 🚨 REUSE - DO NOT GENERATE |
+| 85:440  | ❌ NO        | -              | -                 | ✅ Generate custom         |
+| 85:441  | ✅ YES       | TextInput      | @/components      | 🚨 REUSE - DO NOT GENERATE |
+
+Review this table BEFORE writing code. If you skip this, you WILL violate Code Connect.
+
+### 2.2 Step-by-Step Process
+
+#### Step 1: Extract Node ID from Figma URL
+
+```
+URL Format: https://figma.com/design/:fileKey/:fileName?node-id=123-456
+Node ID Format: 123:456 (replace dash with colon)
+
+Example:
+URL: https://www.figma.com/design/ABC123/MyProject?node-id=123-456
+Node ID: 123:456
+```
+
+#### Step 2: Check Code Connect Mappings
+
+**ALWAYS run this command BEFORE generating any code:**
+
+```typescript
+mcp_Figma_get_code_connect_map({
+  nodeId: '123:456', // Your Figma node ID
+  clientLanguages: 'typescript',
+  clientFrameworks: 'react',
+})
+```
+
+**Example Response:**
+
+```json
+{
+  "123:456": {
+    "codeConnectSrc": "src/components/Button.tsx",
+    "codeConnectName": "Button"
+  },
+  "123:457": {
+    "codeConnectSrc": "src/components/TextInput.tsx",
+    "codeConnectName": "TextInput"
+  },
+  "123:458": null // No Code Connect mapping
+}
+```
+
+#### Step 3A: If Code Connect EXISTS (✅ Preferred Path)
+
+When Code Connect mapping exists:
+
+1. **Read the component file** to understand its API
+2. **Check component props** and types
+3. **Map Figma properties** to component props
+4. **Import using exact path** from `codeConnectSrc`
+5. **Use exact component name** from `codeConnectName`
+
+**Example:**
+
+```typescript
+// Code Connect Response:
+{
+  "123:456": {
+    "codeConnectSrc": "src/components/Button.tsx",
+    "codeConnectName": "Button"
+  }
+}
+
+// Step 1: Read src/components/Button.tsx
+interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'outline'
+  size?: 'small' | 'medium' | 'large'
+  onPress: () => void
+  children: React.ReactNode
+}
+
+// Step 2: Generate code using the linked component
+import { Button } from '@/components/Button'
+
+const MyScreen = () => {
+  return (
+    <Button
+      variant="primary"
+      size="large"
+      onPress={handlePress}
+    >
+      Click Me
+    </Button>
+  )
+}
+```
+
+#### Step 3B: If Code Connect DOESN'T EXIST
+
+When NO Code Connect mapping:
+
+1. **Run `get_code` MCP** to get raw Figma code
+2. **Apply theme token mapping** (colors, spacing, typography)
+3. **Use StyleSheet.create()** for all styles
+4. **Follow all styling constraints** (no inline styles, no hardcoded values)
+
+**Example:**
+
+```typescript
+// No Code Connect mapping
+// Generate custom component from Figma
+
+import React from 'react'
+import {Pressable, Text, StyleSheet} from 'react-native'
+import {colors} from '@/themes/colors'
+import {metrics, fontSizes, fontWeights} from '@/themes/metrics'
+import {fonts} from '@/themes/fonts'
+
+const CustomButton = ({onPress, children}) => {
+  return (
+    <Pressable style={styles.button} onPress={onPress}>
+      <Text style={styles.text}>{children}</Text>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  button: {
+    padding: metrics.spacing16,
+    backgroundColor: colors.background.brandPrimary,
+    borderRadius: metrics.radius8,
+  },
+  text: {
+    fontSize: fontSizes.md,
+    fontWeight: fontWeights.medium,
+    fontFamily: fonts.medium,
+    color: colors.foreground.white,
+  },
+})
+
+export default CustomButton
+```
+
+---
+
+## 3. Mandatory Rules
+
+### 3.1 Code Connect Priority Rules
+
+**🚨 CRITICAL: Code Connect has HIGHEST PRIORITY**
+
+```
+Priority Order:
+1. Check Code Connect FIRST (always)
+2. Use linked components IF they exist (mandatory)
+3. Generate new code ONLY when no Code Connect exists
+4. Apply theme tokens ALWAYS (for all code)
+```
+
+**⚠️ STOP AND VERIFY CHECKLIST:**
+
+Before writing ANY component code, answer these questions:
+
+- [ ] Did I run `get_code_connect_map` for this node?
+- [ ] Did the response contain a mapping for this node ID?
+- [ ] If YES mapping exists → Am I importing and using that exact component?
+- [ ] If NO mapping exists → Only then can I generate custom code
+
+**🛑 RED FLAG WARNINGS:**
+
+If you're about to write any of these, STOP and check Code Connect first:
+
+- `<TouchableOpacity>` → Could be `ButtonPrimary`, `ButtonSecondary`, etc.
+- `<Pressable>` → Could be a mapped button component
+- `<TextInput>` → Could be a mapped input component
+- `<View>` with complex styling → Could be a mapped container component
+- Custom icon implementations → Could be mapped icon components
+
+**Remember: If Code Connect says a component exists, you MUST use it. No exceptions.**
+
+### 3.2 MUST DO Rules
+
+**✅ When Code Connect mapping EXISTS:**
+
+1. ✅ **MUST use the linked component** - Never generate duplicate code
+2. ✅ **MUST import from the specified path** - Use exact `codeConnectSrc` path
+3. ✅ **MUST use the exact component name** - Use `codeConnectName` exactly as provided
+4. ✅ **MUST read the component file** - Understand props, API, and usage patterns
+5. ✅ **MUST map Figma properties to component props** - Translate design properties correctly
+6. ✅ **MUST check all nested components** - Children may also have Code Connect
+7. ✅ **MUST apply theme tokens** - For container/layout styles around components
+
+**❌ NEVER DO Rules (VIOLATIONS):**
+
+```typescript
+// ❌ VIOLATION 1: Generating new component when Code Connect exists
+const Button = () => {
+  return <Pressable>...</Pressable> // Code Connect says use src/components/Button.tsx!
+}
+
+// ❌ VIOLATION 2: Using wrong import path
+import {Button} from '@/ui/Button' // Code Connect says src/components/Button.tsx!
+
+// ❌ VIOLATION 3: Using wrong component name
+import {CustomButton} from '@/components/Button' // Code Connect says name is "Button"!
+
+// ❌ VIOLATION 4: Not checking Code Connect before generating
+// ALWAYS run get_code_connect_map FIRST!
+
+// ❌ VIOLATION 5: Recreating component logic
+const MyButton = ({children}) => {
+  // Duplicating existing Button component logic
+  return <Button variant="primary">{children}</Button>
+}
+
+// ❌ VIOLATION 6: Ignoring component props
+;<Button>Click Me</Button> // Missing required props like variant, onPress
+```
+
+### 3.3 Code Generation Checklist
+
+**Before generating ANY code from Figma, complete this checklist:**
+
+- [ ] Extract node ID from Figma URL
+- [ ] Run `get_code_connect_map` for the node
+- [ ] **🚨 CRITICAL: Analyze the Code Connect response**
+  - [ ] List ALL node IDs that have mappings
+  - [ ] Note component name and source for EACH mapping
+  - [ ] Create a mapping reference table before coding
+- [ ] Check if Code Connect mapping exists
+- [ ] **IF Code Connect EXISTS:**
+  - [ ] ⚠️ MANDATORY: Read linked component file
+  - [ ] ⚠️ MANDATORY: Understand component props and API
+  - [ ] ⚠️ MANDATORY: Map Figma properties to component props
+  - [ ] ⚠️ MANDATORY: Import using exact path from `codeConnectSrc`
+  - [ ] ⚠️ MANDATORY: Use exact name from `codeConnectName`
+  - [ ] Check all nested/child components for Code Connect
+  - [ ] **NEVER generate custom code for this element**
+- [ ] **IF Code Connect DOESN'T EXIST:**
+  - [ ] Run `get_code` MCP to get Figma code
+  - [ ] Identify Figma variables
+  - [ ] Map to theme tokens
+  - [ ] Use StyleSheet.create()
+  - [ ] No inline styles
+  - [ ] No hardcoded values
+- [ ] **ALWAYS:**
+  - [ ] Apply theme token mapping
+  - [ ] Import necessary theme modules
+  - [ ] Verify no hardcoded values
+  - [ ] **Double-check: Did I use ALL Code Connect components?**
+  - [ ] Test code compiles
+
+**⚠️ VIOLATION CHECK:**
+
+After generating code, verify:
+
+- [ ] Every node with Code Connect uses the linked component
+- [ ] No `TouchableOpacity`/`Pressable` where `ButtonPrimary` exists
+- [ ] No custom implementations duplicating Code Connect components
+- [ ] All imports match `codeConnectSrc` paths exactly
+
+---
+
+## 3.4 Real-World Violation Example
+
+### Case Study: Floating Action Button Violation
+
+**Scenario:** Implementing a home screen with a floating action button from Figma.
+
+**Code Connect Response:**
+
+```json
+{
+  "85:439": {
+    "componentName": "ButtonPrimary",
+    "source": "https://github.com/.../rn-base-component/.../ButtonPrimary.d.ts",
+    "snippet": "<ButtonPrimary children={<Icon source={require('@/assets/images/icon.png')} />}/>",
+    "snippetImports": ["import { ButtonPrimary } from 'rn-base-component'"]
+  }
+}
+```
+
+**❌ VIOLATION - What was generated:**
+
+```typescript
+// WRONG - Ignored Code Connect mapping
+;<TouchableOpacity style={styles.fab} onPress={handleAddAction}>
+  <Text style={styles.fabIcon}>+</Text>
+</TouchableOpacity>
+
+const styles = StyleSheet.create({
+  fab: {
+    width: 56,
+    height: 56,
+    borderRadius: 1000,
+    backgroundColor: colors.foreground.brandPrimary,
+    // ... custom styling
+  },
+})
+```
+
+**Why this is wrong:**
+
+1. ❌ Code Connect said to use `ButtonPrimary` from `rn-base-component`
+2. ❌ Generated custom `TouchableOpacity` instead
+3. ❌ Duplicated button functionality that already exists
+4. ❌ Lost built-in theming, states, and accessibility features
+5. ❌ Creates maintenance burden with duplicate code
+
+**✅ CORRECT - Using Code Connect:**
+
+```typescript
+import {ButtonPrimary, Icon} from 'rn-base-component'
+
+// CORRECT - Uses mapped component
+;<ButtonPrimary onPress={handleAddAction} style={styles.fab} accessibilityLabel={getString('home.addAction')}>
+  <Icon source={require('@/assets/images/plus-icon.png')} />
+</ButtonPrimary>
+
+const styles = StyleSheet.create({
+  fab: {
+    position: 'absolute',
+    bottom: 124,
+    right: metrics.spacing16,
+    // Only container positioning, not button styling
+  },
+})
+```
+
+**Lessons Learned:**
+
+1. **Always create the mapping table (Step 2.5)** before writing code
+2. **Stop when you see `TouchableOpacity`** - check if it should be a mapped button
+3. **Read the Code Connect response carefully** - it tells you exactly what to use
+4. **Use the linked component's styling** - don't recreate its internal styles
+5. **Container styles only** - only style the positioning, not the component itself
+
+**Prevention Checklist:**
+
+Before writing `<TouchableOpacity>`, ask:
+
+- [ ] Did I check Code Connect for this node?
+- [ ] Is there a mapped button component?
+- [ ] Did I read the component's props/API?
+- [ ] Am I using the exact import path?
+- [ ] Am I only styling the container, not the component?
+
+---
+
+## 4. Usage Examples
+
+### 4.1 Example 1: Simple Button with Code Connect
+
+**Scenario:** Generate login button from Figma design
+
+**Figma Design:**
+
+- Node ID: `456:789`
+- Component: Button
+- Text: "Login"
+- Variant: Primary
+- Size: Medium
+
+**Step 1: Check Code Connect**
+
+```typescript
+mcp_Figma_get_code_connect_map({
+  nodeId: "456:789",
+  clientLanguages: "typescript",
+  clientFrameworks: "react"
+})
+
+// Response:
+{
+  "456:789": {
+    "codeConnectSrc": "src/components/Button.tsx",
+    "codeConnectName": "Button"
+  }
+}
+```
+
+**Step 2: Read Component**
+
+```typescript
+// Read src/components/Button.tsx
+interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'outline'
+  size?: 'small' | 'medium' | 'large'
+  icon?: string
+  onPress: () => void
+  disabled?: boolean
+  children: React.ReactNode
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'medium',
+  icon,
+  onPress,
+  disabled,
+  children,
+}) => {
+  // Component implementation...
+}
+```
+
+**Step 3: Generate Code**
+
+```typescript
+// ✅ CORRECT - Using Code Connect component
+import React from 'react'
+import {View, StyleSheet} from 'react-native'
+import {Button} from '@/components/Button'
+import {metrics} from '@/themes/metrics'
+
+const LoginScreen = () => {
+  const handleLogin = () => {
+    // Login logic
+  }
+
+  return (
+    <View style={styles.container}>
+      <Button variant="primary" size="medium" onPress={handleLogin}>
+        Login
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: metrics.spacing16,
+  },
+})
+
+export default LoginScreen
+```
+
+### 4.2 Example 2: Form with Multiple Code Connect Components
+
+**Scenario:** Generate registration form from Figma
+
+**Figma Design:**
+
+- Node ID: `100:200`
+- Contains: Email TextInput (Node: `100:201`)
+- Contains: Password TextInput (Node: `100:202`)
+- Contains: Confirm Password TextInput (Node: `100:203`)
+- Contains: Checkbox "I agree to terms" (Node: `100:204`)
+- Contains: Submit Button (Node: `100:205`)
+
+**Step 1: Check Code Connect for All Components**
+
+```typescript
+mcp_Figma_get_code_connect_map({
+  nodeId: "100:200",  // Parent form
+  clientLanguages: "typescript",
+  clientFrameworks: "react"
+})
+
+// Response:
+{
+  "100:200": null,  // Parent container has no mapping
+  "100:201": {      // Email TextInput
+    "codeConnectSrc": "src/components/TextInput.tsx",
+    "codeConnectName": "TextInput"
+  },
+  "100:202": {      // Password TextInput
+    "codeConnectSrc": "src/components/TextInput.tsx",
+    "codeConnectName": "TextInput"
+  },
+  "100:203": {      // Confirm Password TextInput
+    "codeConnectSrc": "src/components/TextInput.tsx",
+    "codeConnectName": "TextInput"
+  },
+  "100:204": {      // Checkbox
+    "codeConnectSrc": "src/components/Checkbox.tsx",
+    "codeConnectName": "Checkbox"
+  },
+  "100:205": {      // Button
+    "codeConnectSrc": "src/components/Button.tsx",
+    "codeConnectName": "Button"
+  }
+}
+```
+
+**Step 2: Read All Component Files**
+
+```typescript
+// src/components/TextInput.tsx
+interface TextInputProps {
+  label: string
+  placeholder?: string
+  value: string
+  onChangeText: (text: string) => void
+  error?: string
+  secureTextEntry?: boolean
+  keyboardType?: KeyboardTypeOptions
+}
+
+// src/components/Checkbox.tsx
+interface CheckboxProps {
+  label: string
+  checked: boolean
+  onToggle: (checked: boolean) => void
+}
+
+// src/components/Button.tsx
+interface ButtonProps {
+  variant?: 'primary' | 'secondary'
+  size?: 'small' | 'medium' | 'large'
+  onPress: () => void
+  disabled?: boolean
+  children: React.ReactNode
+}
+```
+
+**Step 3: Generate Complete Form**
+
+```typescript
+// ✅ CORRECT - Using all Code Connect components
+import React, {useState} from 'react'
+import {View, StyleSheet} from 'react-native'
+import {TextInput} from '@/components/TextInput'
+import {Checkbox} from '@/components/Checkbox'
+import {Button} from '@/components/Button'
+import {metrics} from '@/themes/metrics'
+
+const RegistrationScreen = () => {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [agreedToTerms, setAgreedToTerms] = useState(false)
+
+  const handleRegister = () => {
+    // Registration logic
+  }
+
+  const isFormValid =
+    email.length > 0 && password.length >= 8 && password === confirmPassword && agreedToTerms
+
+  return (
+    <View style={styles.container}>
+      <TextInput
+        label="Email"
+        placeholder="Enter your email"
+        value={email}
+        onChangeText={setEmail}
+        keyboardType="email-address"
+      />
+
+      <TextInput
+        label="Password"
+        placeholder="Enter your password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+      />
+
+      <TextInput
+        label="Confirm Password"
+        placeholder="Confirm your password"
+        value={confirmPassword}
+        onChangeText={setConfirmPassword}
+        secureTextEntry
+      />
+
+      <Checkbox
+        label="I agree to the terms and conditions"
+        checked={agreedToTerms}
+        onToggle={setAgreedToTerms}
+      />
+
+      <Button variant="primary" size="large" onPress={handleRegister} disabled={!isFormValid}>
+        Create Account
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: metrics.spacing16,
+    gap: metrics.spacing16,
+  },
+})
+
+export default RegistrationScreen
+```
+
+### 4.3 Example 3: Mixed - Code Connect + Custom Code
+
+**Scenario:** Screen with custom header but reusable button
+
+**Figma Design:**
+
+- Node ID: `300:400`
+- Contains: Custom Header with logo and title (Node: `300:401`) - No Code Connect
+- Contains: Custom welcome message (Node: `300:402`) - No Code Connect
+- Contains: "Get Started" Button (Node: `300:403`) - Has Code Connect
+- Contains: "Learn More" Button (Node: `300:404`) - Has Code Connect
+
+**Step 1: Check Code Connect**
+
+```typescript
+mcp_Figma_get_code_connect_map({
+  nodeId: "300:400",
+  clientLanguages: "typescript",
+  clientFrameworks: "react"
+})
+
+// Response:
+{
+  "300:400": null,  // Parent has no mapping
+  "300:401": null,  // Custom header - no mapping
+  "300:402": null,  // Custom message - no mapping
+  "300:403": {      // Get Started button
+    "codeConnectSrc": "src/components/Button.tsx",
+    "codeConnectName": "Button"
+  },
+  "300:404": {      // Learn More button
+    "codeConnectSrc": "src/components/Button.tsx",
+    "codeConnectName": "Button"
+  }
+}
+```
+
+**Step 2: Generate Mixed Code**
+
+```typescript
+// ✅ CORRECT - Mix of Code Connect and custom code
+import React from 'react'
+import {View, Text, Image, StyleSheet} from 'react-native'
+import {Button} from '@/components/Button' // ← Code Connect
+import {colors} from '@/themes/colors'
+import {metrics, fontSizes, fontWeights} from '@/themes/metrics'
+import {fonts} from '@/themes/fonts'
+import {images} from '@/themes/images'
+
+const WelcomeScreen = () => {
+  const handleGetStarted = () => {
+    // Navigate to sign up
+  }
+
+  const handleLearnMore = () => {
+    // Navigate to info screen
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Custom Header - Generated from Figma (no Code Connect) */}
+      <View style={styles.header}>
+        <Image source={images.logo} style={styles.logo} />
+        <Text style={styles.title}>Welcome to MyApp</Text>
+        <Text style={styles.subtitle}>Your journey to success starts here</Text>
+      </View>
+
+      {/* Custom Message - Generated from Figma (no Code Connect) */}
+      <View style={styles.messageContainer}>
+        <Text style={styles.messageText}>
+          Join thousands of users who have already transformed their lives
+        </Text>
+      </View>
+
+      {/* Buttons - Using Code Connect */}
+      <View style={styles.buttonContainer}>
+        <Button variant="primary" size="large" onPress={handleGetStarted}>
+          Get Started
+        </Button>
+
+        <Button variant="outline" size="large" onPress={handleLearnMore}>
+          Learn More
+        </Button>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: metrics.spacing24,
+    backgroundColor: colors.background.primary,
+  },
+  header: {
+    alignItems: 'center',
+    marginBottom: metrics.spacing32,
+  },
+  logo: {
+    width: metrics.iconSize24 * 3,
+    height: metrics.iconSize24 * 3,
+    marginBottom: metrics.spacing16,
+  },
+  title: {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.medium,
+    fontFamily: fonts.medium,
+    color: colors.text.primary,
+    marginBottom: metrics.spacing8,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: fontSizes.md,
+    fontWeight: fontWeights.regular,
+    fontFamily: fonts.regular,
+    color: colors.text.secondary,
+    textAlign: 'center',
+  },
+  messageContainer: {
+    padding: metrics.spacing16,
+    backgroundColor: colors.background.brandPrimary,
+    borderRadius: metrics.radius8,
+    marginBottom: metrics.spacing32,
+  },
+  messageText: {
+    fontSize: fontSizes.sm,
+    color: colors.text.primary,
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+  buttonContainer: {
+    gap: metrics.spacing12,
+  },
+})
+
+export default WelcomeScreen
+```
+
+### 4.4 Example 4: Nested Components with Code Connect
+
+**Scenario:** Product card with multiple nested components
+
+**Figma Design:**
+
+- Product Card (Node: `500:100`)
+  - Product Image (Node: `500:101`) - Custom
+  - Product Title (Node: `500:102`) - Custom
+  - Product Price (Node: `500:103`) - Custom
+  - Add to Cart Button (Node: `500:104`) - Code Connect
+  - Favorite Icon Button (Node: `500:105`) - Code Connect
+
+**Step 1: Check All Components**
+
+```typescript
+mcp_Figma_get_code_connect_map({
+  nodeId: "500:100",
+  clientLanguages: "typescript",
+  clientFrameworks: "react"
+})
+
+// Response:
+{
+  "500:100": null,  // Card container - no mapping
+  "500:101": null,  // Image - no mapping
+  "500:102": null,  // Title - no mapping
+  "500:103": null,  // Price - no mapping
+  "500:104": {      // Add to Cart Button
+    "codeConnectSrc": "src/components/Button.tsx",
+    "codeConnectName": "Button"
+  },
+  "500:105": {      // Favorite Icon Button
+    "codeConnectSrc": "src/components/IconButton.tsx",
+    "codeConnectName": "IconButton"
+  }
+}
+```
+
+**Step 2: Generate Product Card Component**
+
+```typescript
+// ✅ CORRECT - Nested mix of Code Connect and custom code
+import React from 'react'
+import {View, Text, Image, StyleSheet} from 'react-native'
+import {Button} from '@/components/Button' // ← Code Connect
+import {IconButton} from '@/components/IconButton' // ← Code Connect
+import {colors} from '@/themes/colors'
+import {metrics, fontSizes, fontWeights} from '@/themes/metrics'
+import {fonts} from '@/themes/fonts'
+
+interface ProductCardProps {
+  product: {
+    id: string
+    title: string
+    price: number
+    imageUrl: string
+  }
+  onAddToCart: (id: string) => void
+  onToggleFavorite: (id: string) => void
+  isFavorite: boolean
+}
+
+const ProductCard: React.FC<ProductCardProps> = ({product, onAddToCart, onToggleFavorite, isFavorite}) => {
+  return (
+    <View style={styles.card}>
+      {/* Custom Image Section */}
+      <View style={styles.imageContainer}>
+        <Image source={{uri: product.imageUrl}} style={styles.image} resizeMode="cover" />
+
+        {/* Icon Button - Code Connect */}
+        <IconButton
+          icon={isFavorite ? 'heart-filled' : 'heart-outline'}
+          onPress={() => onToggleFavorite(product.id)}
+          style={styles.favoriteButton}
+        />
+      </View>
+
+      {/* Custom Product Info */}
+      <View style={styles.infoContainer}>
+        <Text style={styles.title} numberOfLines={2}>
+          {product.title}
+        </Text>
+        <Text style={styles.price}>${product.price.toFixed(2)}</Text>
+      </View>
+
+      {/* Button - Code Connect */}
+      <Button variant="primary" size="medium" onPress={() => onAddToCart(product.id)}>
+        Add to Cart
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: colors.background.primary,
+    borderRadius: metrics.radius12,
+    padding: metrics.spacing16,
+    gap: metrics.spacing12,
+    shadowColor: colors.foreground.primary,
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  imageContainer: {
+    position: 'relative',
+    width: '100%',
+    height: 200,
+    borderRadius: metrics.radius8,
+    overflow: 'hidden',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  favoriteButton: {
+    position: 'absolute',
+    top: metrics.spacing8,
+    right: metrics.spacing8,
+  },
+  infoContainer: {
+    gap: metrics.spacing4,
+  },
+  title: {
+    fontSize: fontSizes.md,
+    fontWeight: fontWeights.medium,
+    fontFamily: fonts.medium,
+    color: colors.text.primary,
+  },
+  price: {
+    fontSize: fontSizes.lg,
+    fontWeight: fontWeights.medium,
+    fontFamily: fonts.medium,
+    color: colors.text.brandPrimary,
+  },
+})
+
+export default ProductCard
+```
+
+---
+
+## 5. Integration with Theme System
+
+### 5.1 Code Connect + Theme Tokens
+
+Code Connect components **MUST** work together with theme token mapping:
+
+**Rule:** When using Code Connect components:
+
+- ✅ Use Code Connect for **component imports and usage**
+- ✅ Use theme tokens for **container/layout styles**
+- ✅ Never override Code Connect component styles with inline styles
+
+**Example:**
+
+```typescript
+// ✅ CORRECT - Code Connect + Theme Tokens
+import { Button } from '@/components/Button'  // Code Connect
+import { metrics } from '@/themes/metrics'    // Theme tokens
+
+const MyScreen = () => {
+  return (
+    <View style={styles.container}>  {/* Theme tokens for layout */}
+      <Button variant="primary" onPress={handlePress}>
+        Submit
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: metrics.spacing16,  // ✅ Theme token
+    gap: metrics.spacing12,      // ✅ Theme token
+  },
+})
+
+// ❌ WRONG - Overriding Code Connect component
+<View style={{ padding: 10 }}>  {/* ❌ Inline style + hardcoded */}
+  <Button variant="primary" style={{ backgroundColor: 'red' }}>
+    {/* ❌ Never override Code Connect component styles */}
+    Submit
+  </Button>
+</View>
+```
+
+### 5.2 Priority Order
+
+When generating code, follow this priority:
+
+```
+1. Code Connect Check (Highest Priority)
+   ↓
+2. Use Code Connect components if they exist
+   ↓
+3. Apply theme tokens for layout/container styles
+   ↓
+4. Generate custom code only when no Code Connect
+   ↓
+5. Apply theme tokens to custom code (Lowest Priority, Always Apply)
+```
+
+### 5.3 Complete Integration Example
+
+```typescript
+// Complete example showing Code Connect + Theme Token integration
+
+import React, {useState} from 'react'
+import {View, Text, ScrollView, StyleSheet} from 'react-native'
+
+// Code Connect Components
+import {TextInput} from '@/components/TextInput'
+import {Button} from '@/components/Button'
+import {Checkbox} from '@/components/Checkbox'
+
+// Theme System
+import {colors} from '@/themes/colors'
+import {metrics, fontSizes, fontWeights} from '@/themes/metrics'
+import {fonts} from '@/themes/fonts'
+
+const CompleteFormScreen = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    agreedToTerms: false,
+  })
+
+  const handleSubmit = () => {
+    // Submit logic
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      {/* Custom Header - No Code Connect */}
+      <View style={styles.header}>
+        <Text style={styles.title}>Sign Up</Text>
+        <Text style={styles.subtitle}>Create your account</Text>
+      </View>
+
+      {/* Form Fields - Code Connect Components */}
+      <View style={styles.form}>
+        <TextInput
+          label="Full Name"
+          placeholder="Enter your name"
+          value={formData.name}
+          onChangeText={name => setFormData({...formData, name})}
+        />
+
+        <TextInput
+          label="Email"
+          placeholder="Enter your email"
+          value={formData.email}
+          onChangeText={email => setFormData({...formData, email})}
+          keyboardType="email-address"
+        />
+
+        <Checkbox
+          label="I agree to the terms and conditions"
+          checked={formData.agreedToTerms}
+          onToggle={agreedToTerms => setFormData({...formData, agreedToTerms})}
+        />
+      </View>
+
+      {/* Submit Button - Code Connect */}
+      <Button variant="primary" size="large" onPress={handleSubmit} disabled={!formData.agreedToTerms}>
+        Create Account
+      </Button>
+
+      {/* Custom Footer - No Code Connect */}
+      <View style={styles.footer}>
+        <Text style={styles.footerText}>Already have an account?</Text>
+        <Text style={styles.footerLink}>Sign In</Text>
+      </View>
+    </ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  // All styles use theme tokens
+  container: {
+    flex: 1,
+    backgroundColor: colors.background.primary,
+    padding: metrics.spacing24,
+  },
+  header: {
+    marginBottom: metrics.spacing32,
+  },
+  title: {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.medium,
+    fontFamily: fonts.medium,
+    color: colors.text.primary,
+    marginBottom: metrics.spacing8,
+  },
+  subtitle: {
+    fontSize: fontSizes.md,
+    fontWeight: fontWeights.regular,
+    fontFamily: fonts.regular,
+    color: colors.text.secondary,
+  },
+  form: {
+    gap: metrics.spacing16,
+    marginBottom: metrics.spacing24,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: metrics.spacing4,
+    marginTop: metrics.spacing24,
+  },
+  footerText: {
+    fontSize: fontSizes.sm,
+    color: colors.text.tertiary,
+  },
+  footerLink: {
+    fontSize: fontSizes.sm,
+    color: colors.text.brandPrimary,
+    fontWeight: fontWeights.medium,
+  },
+})
+
+export default CompleteFormScreen
+```
+
+---
+
+## Summary
+
+### Key Takeaways
+
+1. **ALWAYS check Code Connect FIRST** before generating any code from Figma
+2. **CREATE MAPPING TABLE (Step 2.5)** after getting Code Connect response
+3. **MUST use linked components** when Code Connect mappings exist
+4. **NEVER generate duplicate code** for components with Code Connect
+5. **ALWAYS apply theme tokens** for layout and container styles
+6. **Mix Code Connect and custom code** intelligently based on mappings
+7. **Read component files** to understand props and API before using
+8. **Map Figma properties** correctly to component props
+
+### Workflow Summary
+
+```
+Figma Design → Check Code Connect → 🚨 CREATE MAPPING TABLE 🚨 → Use Linked Components (if exist) → Apply Theme Tokens → Done
+                                                              ↓
+                                                              Generate Custom Code (if no mapping) → Apply Theme Tokens → Done
+```
+
+### Rules Summary
+
+- ✅ Code Connect = Highest Priority
+- ✅ Mapping Table = MANDATORY before coding
+- ✅ Theme Tokens = Always Apply
+- ✅ Reuse > Generate
+- ❌ Never duplicate components with Code Connect
+- ❌ Never ignore Code Connect mappings
+- ❌ Never skip the mapping table analysis
+- ❌ Never use inline styles or hardcoded values
+
+### Common Violations to Avoid
+
+| Violation                                      | Instead Use                              |
+| ---------------------------------------------- | ---------------------------------------- |
+| `<TouchableOpacity>` when ButtonPrimary exists | `<ButtonPrimary>` from rn-base-component |
+| `<Pressable>` when Button exists               | The mapped Button component              |
+| Custom TextInput when mapped                   | The linked TextInput component           |
+| Recreating component logic                     | Import and use existing component        |
+| Skipping Code Connect check                    | Always run get_code_connect_map first    |
+| Ignoring mapping response                      | Create table, review ALL mappings        |
+
+### Final Warning
+
+**🚨 THE MOST COMMON MISTAKE:**
+
+Checking Code Connect, seeing a mapping exists, then **generating custom code anyway**.
+
+**This happens when you:**
+
+- ❌ Skip creating the mapping table (Step 2.5)
+- ❌ Don't carefully read the Code Connect response
+- ❌ Rush to code generation without analysis
+- ❌ Forget to verify mapped components were used
+
+**To prevent this:**
+
+- ✅ ALWAYS create mapping table before coding
+- ✅ Review table: "Which nodes MUST use existing components?"
+- ✅ After coding: "Did I use ALL mapped components?"
+- ✅ Code review: No `TouchableOpacity`/`Pressable` where buttons map
+
+### Success Checklist
+
+After implementing from Figma, verify:
+
+- [ ] I ran `get_code_connect_map` for all nodes
+- [ ] I created the mapping table (Step 2.5)
+- [ ] Every mapped node uses the linked component
+- [ ] No custom implementations for mapped components
+- [ ] Imports match Code Connect sources exactly
+- [ ] Props are correctly mapped from Figma to component
+- [ ] Theme tokens applied for container/layout styles
+- [ ] No inline styles or hardcoded values
+
+By following this guide strictly, especially **Step 2.5 (mapping table creation)**, you ensure that AI-generated code from Figma designs consistently reuses your existing components while maintaining theme consistency across your entire application.
+
+**Remember: Code Connect exists to prevent duplicate code. Honor it.**
diff --git a/code-connect/docs/Mobile_Figma_Variables_Setup_Guide.md b/code-connect/docs/Mobile_Figma_Variables_Setup_Guide.md
new file mode 100644
index 0000000..2947422
--- /dev/null
+++ b/code-connect/docs/Mobile_Figma_Variables_Setup_Guide.md
@@ -0,0 +1,1150 @@
+# Mobile Theme Setup Guideline with Figma MCP
+
+This document provides step-by-step instructions for setting up and synchronizing mobile theme variables from Figma designs using Figma MCP (Model Context Protocol).
+
+## Prerequisites
+
+- Figma MCP installed and configured in your development environment
+- Access to the Figma design file with proper permissions
+- Existing project structure with theme files:
+  - `src/themes/colors.ts`
+  - `src/themes/metrics.ts`
+  - `src/themes/fonts.ts`
+  - `src/themes/theme.ts`
+
+## Overview
+
+The theme setup process consists of three main steps:
+
+1. **Extract variables** from Figma using MCP
+2. **Transform and organize** variables into appropriate theme files
+3. **Create design system rules** for consistent usage
+
+---
+
+## Step 1: Extract Variables from Figma
+
+### 1.1 Get the Figma Node ID
+
+Extract the node ID from your Figma URL:
+
+```
+URL Format: https://figma.com/design/:fileKey/:fileName?node-id=1-2
+Node ID Format: 1:2 (replace dash with colon)
+
+Example:
+URL: https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Project?node-id=9-55163
+Node ID: 9:55163
+```
+
+### 1.2 Run MCP Command
+
+Use the Figma MCP `get_variable_defs` tool to extract all design variables:
+
+```typescript
+mcp_Figma_get_variable_defs({
+  nodeId: '9:55163',
+  clientLanguages: 'typescript',
+  clientFrameworks: 'react',
+})
+```
+
+### 1.3 Review Extracted Variables
+
+The MCP will return variables in the following categories:
+
+- **Colors**: Text, background, foreground, border, feedback colors, and color palettes
+- **Typography**: Font families, sizes, weights, line heights
+- **Spacing**: Padding and margin values
+- **Radius**: Border radius values
+- **Icon Sizes**: Standard icon dimensions
+
+Example output format:
+
+```json
+{
+  "color/text/text-primary": "#hexValue",
+  "typography/font-size/text/md": "number",
+  "spacing/8": "number",
+  "radius/8": "number",
+  "icon-size/24": "number"
+}
+```
+
+**Note:** The actual values will depend on your Figma design system.
+
+---
+
+## Step 2: Transform and Organize Variables
+
+### 2.1 COLORS - Update `src/themes/colors.ts`
+
+#### 2.1.1 Naming Convention Rules
+
+**MANDATORY RULES:**
+
+- ✅ Use **camelCase** for all color names
+- ✅ Remove special characters (slashes, hyphens)
+- ✅ Convert hierarchical structure to meaningful names
+
+**Transformation Examples:**
+
+```typescript
+// Figma Variable → Code Variable Name
+"color/text/text-primary_on-brand" → textPrimaryOnBrand
+"color/background/bg-primary" → bgPrimary
+"color/border/border-secondary" → borderSecondary
+"color/feedback/text/error" → feedbackTextError
+```
+
+#### 2.1.2 Color Structure
+
+**Transformation Pattern:**
+
+```
+color/category/name             →  colors.category.name
+color/category/subcategory/name →  colors.category.subcategory.name
+```
+
+**Template Structure:**
+
+```typescript
+const colors = {
+  // Direct colors
+  primary: '#hexValue',
+
+  // Nested categories
+  text: {
+    primary: '#hexValue',
+    secondary: '#hexValue',
+  },
+
+  background: {
+    primary: '#hexValue',
+  },
+
+  feedback: {
+    success: {
+      text: '#hexValue',
+    },
+    error: {
+      text: '#hexValue',
+    },
+  },
+
+  // Legacy colors (if existing)
+  light: { ... },
+  dark: { ... },
+} as const
+```
+
+**Implementation Steps:**
+
+1. Run `get_variable_defs` to extract all Figma color variables
+2. Identify hierarchy patterns in variable names
+3. Create nested objects matching Figma structure
+4. Convert names to camelCase (remove hyphens/underscores)
+5. Replace `#hexValue` with actual Figma values
+
+**Example Transformation:**
+
+```typescript
+// Figma Variables:
+"color/text/text-primary": "#123456"
+"color/background/bg-primary": "#ffffff"
+"color/feedback/error/text": "#ff0000"
+
+// Code Implementation:
+const colors = {
+  text: {
+    primary: '#123456',
+  },
+  background: {
+    primary: '#ffffff',
+  },
+  feedback: {
+    error: {
+      text: '#ff0000',
+    },
+  },
+} as const
+```
+
+#### 2.1.3 Color Palette (Separate Constant)
+
+**Purpose:** For colors with numeric scales (e.g., red/100, blue/500)
+
+**Transformation Pattern:**
+
+```
+color/red/100            →  palette.red._100
+color/blue/500           →  palette.blue._500
+color/black/opacity/20   →  palette.black._20
+```
+
+**Template Structure:**
+
+```typescript
+const palette = {
+  red: {
+    _50: '#hexValue',
+    _100: '#hexValue',
+    _500: '#hexValue',
+  },
+  blue: {
+    _300: '#hexValue',
+  },
+  black: {
+    _20: '#hexValue',
+  },
+} as const
+```
+
+**Implementation Steps:**
+
+1. Identify numeric patterns in Figma variables (`/50`, `/100`, `/500`)
+2. Group by color name (all red shades together)
+3. Use underscore prefix for numbers (`50` → `_50`)
+4. Only include colors with multiple numeric variants
+
+**Example Transformation:**
+
+```typescript
+// Figma Variables:
+"color/red/100": "#ffcccc"
+"color/red/500": "#ff0000"
+"color/blue/300": "#6699ff"
+
+// Code Implementation:
+const palette = {
+  red: {
+    _100: '#ffcccc',
+    _500: '#ff0000',
+  },
+  blue: {
+    _300: '#6699ff',
+  },
+} as const
+```
+
+#### 2.1.4 Replace Existing Values
+
+**IMPORTANT:** When a color name or meaning matches an existing color:
+
+- ✅ **MUST replace** the existing value with the new value from Figma
+- ✅ Maintain backward compatibility by keeping the property name
+
+Example:
+
+```typescript
+// Before (existing in your project)
+const colors = {
+  primary: '#oldHexValue',
+  error: '#oldHexValue',
+}
+
+// After (updated from Figma)
+const colors = {
+  primary: '#newFigmaValue', // ✅ Replaced with Figma value
+  error: '#newFigmaValue', // ✅ Replaced with Figma value
+}
+```
+
+#### 2.1.5 Utility Functions
+
+Keep existing utility functions at the bottom:
+
+```typescript
+const getColorOpacity = (color: string, opacity: number): string => {
+  if (opacity >= 0 && opacity <= 1 && color.includes('#')) {
+    const hexValue = Math.round(opacity * 255).toString(16)
+    return `${color.slice(0, 7)}${hexValue.padStart(2, '0').toUpperCase()}`
+  }
+  return color
+}
+
+export {colors, palette, getColorOpacity}
+```
+
+---
+
+### 2.2 SPACING, RADIUS, ICON SIZE - Update `src/themes/metrics.ts`
+
+#### 2.2.1 Naming Convention Rules
+
+**MANDATORY RULES:**
+
+- ✅ Use **camelCase** for all metric names
+- ✅ Append the numeric value to the base name
+- ✅ Use `responsiveHeight()` for spacing and radius
+- ✅ Use `responsiveWidth()` or `responsiveHeight()` for icon sizes
+
+**Transformation Examples:**
+
+```typescript
+// Figma Variable → Code Variable Name
+"spacing/4" → spacing4: responsiveHeight(4)
+"spacing/16" → spacing16: responsiveHeight(16)
+"radius/8" → radius8: responsiveHeight(8)
+"icon-size/24" → iconSize24: responsiveHeight(24)
+```
+
+#### 2.2.2 Metrics Structure
+
+**Template Structure:**
+
+```typescript
+import {Dimensions, Platform} from 'react-native'
+
+const DESIGN_WIDTH = 375
+const DESIGN_HEIGHT = 812
+const {width, height} = Dimensions.get('window')
+
+function responsiveWidth<T extends number>(value: T) {
+  return ((width * value) / DESIGN_WIDTH) as T
+}
+
+function responsiveHeight<T extends number>(value: T) {
+  return ((height * value) / DESIGN_HEIGHT) as T
+}
+
+function responsiveFont<T extends number>(value: T) {
+  return ((width * value) / DESIGN_WIDTH) as T
+}
+
+const metrics = {
+  // Spacing from Figma
+  spacing4: responsiveHeight(4),
+  spacing8: responsiveHeight(8),
+  spacing16: responsiveHeight(16),
+
+  // Radius from Figma
+  radius4: responsiveHeight(4),
+  radius8: responsiveHeight(8),
+  radiusRound: responsiveHeight(1000),
+
+  // Icon sizes from Figma
+  iconSize16: responsiveHeight(16),
+  iconSize24: responsiveHeight(24),
+
+  // Legacy values (keep existing)
+  borderWidth: responsiveHeight(1),
+  textInputHeight: responsiveHeight(44),
+} as const
+```
+
+**Implementation Steps:**
+
+1. Add Figma spacing values: `spacing/X` → `spacingX: responsiveHeight(X)`
+2. Add Figma radius values: `radius/X` → `radiusX: responsiveHeight(X)`
+3. Add Figma icon sizes: `icon-size/X` → `iconSizeX: responsiveHeight(X)`
+4. Keep existing legacy values for backward compatibility
+
+#### 2.2.3 Update Strategy
+
+When updating metrics:
+
+1. ✅ **Add new Figma values** with their exact names
+2. ✅ **Keep legacy values** for backward compatibility
+3. ✅ **Document equivalents** with comments (e.g., `// Same as spacing16`)
+4. ✅ **Gradually migrate** old usage to new names in future refactoring
+
+---
+
+### 2.3 TYPOGRAPHY - Update `src/themes/metrics.ts`
+
+#### 2.3.1 Font Sizes
+
+**Template Structure:**
+
+```typescript
+const fontSizes = {
+  xs: responsiveFont(12),
+  sm: responsiveFont(14),
+  md: responsiveFont(16),
+  lg: responsiveFont(18),
+  xl: responsiveFont(20),
+
+  // Legacy values (keep existing)
+  body: responsiveFont(16),
+  title: responsiveFont(20),
+} as const
+```
+
+#### 2.3.2 Font Weights
+
+**Template Structure:**
+
+```typescript
+const fontWeights = {
+  regular: '400',
+  medium: '500',
+
+  // Legacy values (keep existing)
+  semiBold: '600',
+  bold: '700',
+} as const
+```
+
+#### 2.3.3 Font Families
+
+**Update `src/themes/fonts.ts`:**
+
+```typescript
+const fonts = {
+  regular: 'YourFont-Regular',
+  medium: 'YourFont-Medium',
+  bold: 'YourFont-Bold',
+  family: 'YourFontFamily',
+} as const
+
+export {fonts}
+```
+
+#### 2.3.4 Line Heights (Optional)
+
+**If needed:**
+
+```typescript
+const lineHeights = {
+  xs: responsiveHeight(18),
+  sm: responsiveHeight(20),
+  md: responsiveHeight(22),
+} as const
+```
+
+**Implementation Steps:**
+
+1. Map Figma font sizes: `typography/font-size/text/md` → `fontSizes.md`
+2. Map Figma font weights: `typography/font-weight/medium` → `fontWeights.medium`
+3. Update font family names to match your actual fonts
+4. Add line heights if your design system uses them
+
+---
+
+## Step 3: Create Design System Rules (Figma Theming and Styling)
+
+### 3.1 Purpose of Design System Rules
+
+The design system rules file acts as a **bridge** between Figma variables and your code implementation. When AI generates code from Figma designs using `get_code`, it needs to know how to translate Figma variable names to your actual theme tokens.
+
+**Example Mapping:**
+
+- Figma variable: `spacing/4` → Code: `metrics.spacing4`
+- Figma variable: `color/text/text-primary` → Code: `colors.text.primary`
+- Figma variable: `typography/font-size/text/md` → Code: `fontSizes.md`
+
+**This file also includes:**
+
+- ✅ Complete variable mapping tables (colors, spacing, radius, typography)
+- ✅ Theming system rules (metrics reuse, platform detection)
+- ✅ Styling constraints (no inline styles, no hardcoded values)
+- ✅ Code generation rules and best practices
+- ✅ Special patterns for feedback colors, opacity, rounded elements
+
+### 3.2 Create Theming and Styling Rules File
+
+Create a comprehensive rules file at `.cursor/rules/figma-theming-and-styling.mdc`:
+
+**Template Structure:**
+
+````markdown
+# Figma Design System: Theming and Styling Rules
+
+This document defines the complete design system integration between Figma designs and React Native code implementation, including variable mapping, theming rules, and styling constraints.
+
+## Import Statements
+
+```typescript
+// ALWAYS include these imports when using theme tokens
+import {colors, palette} from '@/themes/colors'
+import {metrics, fontSizes, fontWeights} from '@/themes/metrics'
+import {fonts} from '@/themes/fonts'
+```
+````
+
+## 1. COLOR VARIABLE MAPPING
+
+Create tables for EACH color category found in your Figma design:
+
+### Example: Text Colors
+
+| Figma Variable              | Code Implementation     | Hex Value |
+| --------------------------- | ----------------------- | --------- |
+| `color/text/text-primary`   | `colors.text.primary`   | #hexValue |
+| `color/text/text-secondary` | `colors.text.secondary` | #hexValue |
+| ...                         | ...                     | ...       |
+
+### Example: Background Colors
+
+| Figma Variable                  | Code Implementation           | Hex Value |
+| ------------------------------- | ----------------------------- | --------- |
+| `color/background/bg-primary`   | `colors.background.primary`   | #hexValue |
+| `color/background/bg-secondary` | `colors.background.secondary` | #hexValue |
+| ...                             | ...                           | ...       |
+
+### Example: Border Colors
+
+| Figma Variable                | Code Implementation     | Hex Value |
+| ----------------------------- | ----------------------- | --------- |
+| `color/border/border-primary` | `colors.border.primary` | #hexValue |
+| ...                           | ...                     | ...       |
+
+### Example: Feedback Colors
+
+| Figma Variable                      | Code Implementation                  | Hex Value |
+| ----------------------------------- | ------------------------------------ | --------- |
+| `color/feedback/success/text`       | `colors.feedback.success.text`       | #hexValue |
+| `color/feedback/success/background` | `colors.feedback.success.background` | #hexValue |
+| `color/feedback/error/text`         | `colors.feedback.error.text`         | #hexValue |
+| ...                                 | ...                                  | ...       |
+
+### Example: Color Palette (Base Colors)
+
+| Figma Variable   | Code Implementation | Hex Value |
+| ---------------- | ------------------- | --------- |
+| `color/red/50`   | `palette.red._50`   | #hexValue |
+| `color/red/100`  | `palette.red._100`  | #hexValue |
+| `color/blue/500` | `palette.blue._500` | #hexValue |
+| ...              | ...                 | ...       |
+
+**Instructions:**
+
+- List ALL color variables from your Figma `get_variable_defs` output
+- Group by category (text, background, border, feedback, etc.)
+- Include the hex value for reference
+- Adapt categories based on your actual Figma structure
+
+## 2. SPACING VARIABLE MAPPING
+
+| Figma Variable | Code Implementation | Value |
+| -------------- | ------------------- | ----- |
+| `spacing/4`    | `metrics.spacing4`  | 4px   |
+| `spacing/8`    | `metrics.spacing8`  | 8px   |
+| `spacing/16`   | `metrics.spacing16` | 16px  |
+| ...            | ...                 | ...   |
+
+**Instructions:**
+
+- List ALL spacing values from Figma
+- Format: `spacing/X` → `metrics.spacingX`
+- Include pixel value for reference
+
+**Usage Example:**
+
+```typescript
+// ❌ WRONG - Hardcoded
+padding: 16,
+
+// ✅ CORRECT - Using mapped token
+import { metrics } from '@/themes/metrics'
+padding: metrics.spacing16,  // From Figma spacing/16
+```
+
+## 3. RADIUS VARIABLE MAPPING
+
+| Figma Variable | Code Implementation | Value |
+| -------------- | ------------------- | ----- |
+| `radius/4`     | `metrics.radius4`   | 4px   |
+| `radius/8`     | `metrics.radius8`   | 8px   |
+| ...            | ...                 | ...   |
+
+**Instructions:**
+
+- List ALL radius values from Figma
+- Format: `radius/X` → `metrics.radiusX`
+
+**Usage Example:**
+
+```typescript
+// ❌ WRONG
+borderRadius: 8,
+
+// ✅ CORRECT
+borderRadius: metrics.radius8,
+```
+
+## 4. ICON SIZE VARIABLE MAPPING
+
+| Figma Variable | Code Implementation  | Value |
+| -------------- | -------------------- | ----- |
+| `icon-size/16` | `metrics.iconSize16` | 16px  |
+| `icon-size/24` | `metrics.iconSize24` | 24px  |
+| ...            | ...                  | ...   |
+
+**Instructions:**
+
+- List ALL icon size values from Figma
+- Format: `icon-size/X` → `metrics.iconSizeX`
+
+## 5. TYPOGRAPHY VARIABLE MAPPING
+
+### Font Sizes
+
+| Figma Variable                 | Code Implementation | Value |
+| ------------------------------ | ------------------- | ----- |
+| `typography/font-size/text/xs` | `fontSizes.xs`      | 12px  |
+| `typography/font-size/text/sm` | `fontSizes.sm`      | 14px  |
+| ...                            | ...                 | ...   |
+
+### Font Weights
+
+| Figma Variable                   | Code Implementation   | Value |
+| -------------------------------- | --------------------- | ----- |
+| `typography/font-weight/regular` | `fontWeights.regular` | '400' |
+| `typography/font-weight/medium`  | `fontWeights.medium`  | '500' |
+| ...                              | ...                   | ...   |
+
+### Font Family
+
+| Figma Variable           | Code Implementation | Value              |
+| ------------------------ | ------------------- | ------------------ |
+| `typography/font-family` | `fonts.family`      | 'YourFontName'     |
+| Font(Regular)            | `fonts.regular`     | 'YourFont-Regular' |
+| Font(Medium)             | `fonts.medium`      | 'YourFont-Medium'  |
+| Font(Bold)               | `fonts.bold`        | 'YourFont-Bold'    |
+
+### Line Heights (if applicable)
+
+| Figma Variable                   | Code Implementation | Value |
+| -------------------------------- | ------------------- | ----- |
+| `typography/line-height/text/xs` | `lineHeights.xs`    | 18px  |
+| `typography/line-height/text/sm` | `lineHeights.sm`    | 20px  |
+| ...                              | ...                 | ...   |
+
+**Instructions:**
+
+- List ALL typography variables from Figma
+- Adapt font family names to match your actual fonts
+- Include line heights if your design system uses them
+
+## 6. COMPLETE USAGE EXAMPLE
+
+When AI generates code from Figma using `get_code`, it should transform:
+
+### Figma Design Properties (Example):
+
+```
+Container:
+  - padding: spacing/16          ← Figma variable
+  - borderRadius: radius/8       ← Figma variable
+  - backgroundColor: color/background/bg-primary  ← Figma variable
+
+Text:
+  - color: color/text/text-primary               ← Figma variable
+  - fontSize: typography/font-size/text/md       ← Figma variable
+  - fontWeight: typography/font-weight/medium    ← Figma variable
+```
+
+### Into React Native Code:
+
+```typescript
+import React from 'react'
+import {View, Text, StyleSheet} from 'react-native'
+import {colors} from '@/themes/colors'
+import {metrics, fontSizes, fontWeights, fonts} from '@/themes/metrics'
+
+const Component = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Hello World</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: metrics.spacing16, // ← Mapped from spacing/16
+    borderRadius: metrics.radius8, // ← Mapped from radius/8
+    backgroundColor: colors.background.primary, // ← Mapped from color/background/bg-primary
+  },
+  text: {
+    color: colors.text.primary, // ← Mapped from color/text/text-primary
+    fontSize: fontSizes.md, // ← Mapped from typography/font-size/text/md
+    fontWeight: fontWeights.medium, // ← Mapped from typography/font-weight/medium
+    fontFamily: fonts.medium, // ← Mapped from typography/font-family (Medium)
+  },
+})
+
+export default Component
+```
+
+## 7. CODE GENERATION RULES
+
+When generating code from Figma designs:
+
+1. ✅ **ALWAYS** import theme tokens at the top of the file
+2. ✅ **ALWAYS** use mapped code implementation instead of Figma variable names
+3. ✅ **NEVER** use hardcoded values (numbers or hex colors)
+4. ✅ **ALWAYS** use StyleSheet.create() for styles - inline styles are FORBIDDEN
+5. ✅ **ALWAYS** use predefined metrics from metrics.ts - check before creating new ones
+6. ✅ **ALWAYS** use `isIOS` from metrics instead of `Platform.OS`
+7. ✅ **ALWAYS** check this mapping table before generating code
+8. 🚨 **CRITICAL:** Icon size props MUST use `metrics.iconSize24` or `metrics.iconSize16`
+9. 🚨 **CRITICAL:** NEVER use inline styles like `style={{ width: 24 }}`
+10. 🚨 **CRITICAL:** NEVER use responsive functions directly in styles
+
+### Before Generating Code Checklist:
+
+- [ ] Identify all Figma variables used in the design
+- [ ] Map each Figma variable to code implementation using this table
+- [ ] Import necessary theme modules
+- [ ] **Check metrics.ts for existing values before creating new ones**
+- [ ] Use theme tokens in StyleSheet.create()
+- [ ] Verify no hardcoded values remain
+- [ ] **Replace ALL icon size props** (`size={24}` → `size={metrics.iconSize24}`)
+- [ ] **Remove ALL inline styles** - use StyleSheet.create() instead
+- [ ] **Remove ALL direct responsive function calls** - use predefined metrics
+- [ ] **Replace `Platform.OS` with `isIOS` from metrics**
+
+## 8. STYLING CONSTRAINTS
+
+### 8.1 Inline Styles are FORBIDDEN
+
+**🚨 CRITICAL: NEVER use inline styles**
+
+```typescript
+// ❌ WRONG - NEVER use inline styles
+<View style={{ padding: 16, backgroundColor: '#fff' }}>
+  <Text style={{ fontSize: 14 }}>Hello</Text>
+</View>
+
+// ❌ WRONG - Even with metrics tokens
+<View style={{ padding: metrics.spacing16 }}>
+  <Text>Hello</Text>
+</View>
+
+// ✅ CORRECT - Always use StyleSheet.create()
+<View style={styles.container}>
+  <Text style={styles.text}>Hello</Text>
+</View>
+
+const styles = StyleSheet.create({
+  container: {
+    padding: metrics.spacing16,
+    backgroundColor: colors.background.primary,
+  },
+  text: {
+    fontSize: fontSizes.sm,
+  },
+})
+```
+
+### 8.2 Icon Size Props Must Use Metrics
+
+**🚨 CRITICAL: Icon sizes MUST use metrics tokens**
+
+```typescript
+// ❌ WRONG
+<Icon name="search" size={24} />
+<Image source={icon} style={{ width: 24, height: 24 }} />
+
+// ✅ CORRECT
+<Icon name="search" size={metrics.iconSize24} />
+<Image source={icon} style={styles.icon} />
+
+const styles = StyleSheet.create({
+  icon: {
+    width: metrics.iconSize24,
+    height: metrics.iconSize24,
+  },
+})
+```
+
+### 8.3 Metrics Reuse Rules
+
+**🚨 CRITICAL: Always check existing metrics before creating new ones**
+
+```typescript
+// ❌ WRONG - Direct responsive calls
+const styles = StyleSheet.create({
+  container: {
+    padding: responsiveHeight(16), // Use metrics.spacing16
+    marginTop: responsiveHeight(24), // Use metrics.spacing24
+  },
+})
+
+// ✅ CORRECT - Reuse predefined metrics
+const styles = StyleSheet.create({
+  container: {
+    padding: metrics.spacing16, // Reuses existing value
+    marginTop: metrics.spacing24, // Reuses existing value
+  },
+})
+
+// ✅ CORRECT - Only create new metrics in metrics.ts if value doesn't exist
+// In src/themes/metrics.ts:
+const metrics = {
+  // ... existing values
+  homeBackgroundHeight: responsiveHeight(188), // NEW: Unique value
+}
+```
+
+### 8.4 Platform Detection
+
+**🚨 CRITICAL: Use `isIOS` from metrics instead of `Platform.OS`**
+
+```typescript
+// ❌ WRONG
+import { Platform } from 'react-native'
+behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+
+// ✅ CORRECT
+import { isIOS } from '@/themes/metrics'
+behavior={isIOS ? 'padding' : 'height'}
+```
+
+alwaysApply: true
+
+````
+
+**Important Notes:**
+- The above is a **TEMPLATE** - populate it with YOUR actual Figma variables
+- Run `get_variable_defs` first to get your complete list of variables
+- Create one mapping entry for EACH variable returned from Figma
+- Group variables logically by category
+- Include all theming rules and styling constraints
+- The `alwaysApply: true` ensures AI always references this file
+
+### 3.3 Complete Rule File Contents
+
+The complete `.cursor/rules/figma-theming-and-styling.mdc` file should include:
+
+1. **Variable Mapping Tables** - All Figma variables mapped to code tokens
+2. **Theming System Rules** - How to use metrics, platform detection, naming conventions
+3. **Styling Constraints** - No inline styles, no hardcoded values, icon size rules
+4. **Code Generation Rules** - Complete checklist for generating code from Figma
+5. **Special Patterns** - Feedback colors, opacity, rounded elements, composite fonts
+
+See the template above for the complete structure. The key additions beyond just variable mapping are:
+
+- ✅ **Metrics Reuse Rules**: Check existing metrics before creating new ones
+- ✅ **Platform Detection**: Use `isIOS` from metrics instead of `Platform.OS`
+- ✅ **Inline Style Ban**: NEVER use inline styles, always use StyleSheet.create()
+- ✅ **Icon Size Constraints**: MUST use `metrics.iconSize24`, never hardcoded `size={24}`
+- ✅ **No Responsive Calls**: NEVER call `responsiveHeight()` directly in styles
+- ✅ **Code Generation Checklist**: Complete checklist before submitting code
+
+### 3.4 How to Use This Mapping
+
+When implementing a design from Figma:
+
+1. **Get Figma code** using `get_code` MCP command
+2. **Identify Figma variables** in the generated code (e.g., `spacing/16`, `color/text/text-primary`)
+3. **Refer to mapping table** in `.cursor/rules/figma-theming-and-styling.mdc`
+4. **Replace Figma variables** with the corresponding code tokens
+5. **Check existing metrics** before creating new values
+6. **Remove inline styles** and use StyleSheet.create()
+7. **Replace icon size props** with metrics tokens
+8. **Replace Platform.OS** with `isIOS` from metrics
+9. **Add proper imports** from theme files
+
+**Example Transformation:**
+
+```typescript
+// ❌ BEFORE (Raw code from Figma get_code - hardcoded values)
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,                    // This was spacing/16 in Figma
+    backgroundColor: '#hexValue',   // This was color/background/bg-primary in Figma
+    borderRadius: 8,                // This was radius/8 in Figma
+    gap: 12,                        // This was spacing/12 in Figma
+  },
+  title: {
+    fontSize: 16,                   // This was typography/font-size/text/md
+    fontWeight: '500',              // This was typography/font-weight/medium
+    color: '#hexValue',             // This was color/text/text-primary
+  }
+})
+
+// ✅ AFTER (Mapped to your code implementation using mapping table)
+import { colors } from '@/themes/colors'
+import { metrics, fontSizes, fontWeights } from '@/themes/metrics'
+
+const styles = StyleSheet.create({
+  container: {
+    padding: metrics.spacing16,                 // spacing/16 → metrics.spacing16
+    backgroundColor: colors.background.primary, // bg-primary → colors.background.primary
+    borderRadius: metrics.radius8,              // radius/8 → metrics.radius8
+    gap: metrics.spacing12,                     // spacing/12 → metrics.spacing12
+  },
+  title: {
+    fontSize: fontSizes.md,                     // font-size/md → fontSizes.md
+    fontWeight: fontWeights.medium,             // font-weight/medium → fontWeights.medium
+    color: colors.text.primary,                 // text-primary → colors.text.primary
+  }
+})
+````
+
+**Process:**
+
+1. Identify which Figma variable each hardcoded value represents
+2. Look up the mapping in your `.cursor/rules/figma-variable-mapping.mdc` file
+3. Replace with the corresponding theme token
+4. Add necessary imports
+
+---
+
+## Step 4: Implementation Checklist
+
+After setting up the theme system, verify the following:
+
+### 4.1 Colors Verification
+
+- [ ] All Figma colors are defined in `src/themes/colors.ts`
+- [ ] Color names use camelCase convention
+- [ ] Color hierarchy matches Figma structure
+- [ ] Palette colors are in separate `palette` constant
+- [ ] Existing color values are updated with Figma values
+- [ ] `getColorOpacity` utility function is preserved
+
+### 4.2 Metrics Verification
+
+- [ ] All spacing values are defined with `responsiveHeight()`
+- [ ] All radius values are defined with `responsiveHeight()`
+- [ ] All icon sizes are defined
+- [ ] Legacy values are maintained for compatibility
+- [ ] Naming follows `spacing4`, `radius8`, `iconSize24` pattern
+
+### 4.3 Typography Verification
+
+- [ ] Font sizes defined in `fontSizes` constant
+- [ ] Font weights defined in `fontWeights` constant
+- [ ] Font family updated in `src/themes/fonts.ts`
+- [ ] Line heights defined (if needed)
+- [ ] All values use responsive functions
+
+### 4.4 Theme Integration
+
+- [ ] `src/themes/theme.ts` updated with new colors
+- [ ] Component theming uses new design tokens
+- [ ] Dark mode colors mapped correctly
+- [ ] Backward compatibility maintained
+
+### 4.5 Documentation
+
+- [ ] Design system rules created
+- [ ] Rules saved to `.cursor/rules/figma-theming-and-styling.mdc`
+- [ ] Variable mapping tables complete
+- [ ] Theming system rules documented
+- [ ] Styling constraints defined
+- [ ] Usage examples provided
+- [ ] Best practices documented
+
+---
+
+## Step 5: Usage in Components
+
+### 5.1 Importing Theme Values
+
+```typescript
+// Import colors
+import {colors, palette} from '@/themes/colors'
+
+// Import metrics, typography
+import {metrics, fontSizes, fontWeights} from '@/themes/metrics'
+
+// Import fonts
+import {fonts} from '@/themes/fonts'
+
+// Import complete theme
+import {theme} from '@/themes'
+```
+
+### 5.2 Component Example
+
+```typescript
+import React from 'react'
+import {View, Text, StyleSheet} from 'react-native'
+import {colors} from '@/themes/colors'
+import {metrics, fontSizes, fontWeights} from '@/themes/metrics'
+
+const ExampleComponent = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Hello World</Text>
+      <Text style={styles.body}>This uses Figma design tokens</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.background.primary, // Use your actual color structure
+    padding: metrics.spacing16, // Use your actual spacing values
+    borderRadius: metrics.radius8, // Use your actual radius values
+    gap: metrics.spacing12, // Use your actual spacing values
+  },
+  title: {
+    color: colors.text.primary, // Use your actual text colors
+    fontSize: fontSizes.lg, // Use your actual font sizes
+    fontWeight: fontWeights.medium, // Use your actual font weights
+  },
+  body: {
+    color: colors.text.secondary, // Use your actual text colors
+    fontSize: fontSizes.md, // Use your actual font sizes
+    fontWeight: fontWeights.regular, // Use your actual font weights
+  },
+})
+
+export default ExampleComponent
+```
+
+**Note:** Replace the theme token names with your actual tokens defined in Step 2.
+
+---
+
+## Common Patterns
+
+### Pattern 1: Using Color Hierarchy
+
+```typescript
+// ✅ Correct - Use hierarchical color names
+<View style={{ backgroundColor: colors.background.primary }}>
+  <Text style={{ color: colors.text.brand.primary }}>Brand Text</Text>
+</View>
+
+// ❌ Avoid - Flat or hardcoded colors
+<View style={{ backgroundColor: '#fcfcfc' }}>
+  <Text style={{ color: colors.brandPrimary }}>Brand Text</Text>
+</View>
+```
+
+### Pattern 2: Using Feedback Colors
+
+```typescript
+// ✅ Correct - Use semantic feedback colors
+const getStatusStyle = (status: 'success' | 'error' | 'warning' | 'info') => ({
+  backgroundColor: colors.feedback[status].background,
+  color: colors.feedback[status].text,
+})
+
+// Usage
+<View style={getStatusStyle('success')}>
+  <Text>Success Message</Text>
+</View>
+```
+
+### Pattern 3: Using Responsive Spacing
+
+```typescript
+// ✅ Correct - Use predefined spacing tokens
+const styles = StyleSheet.create({
+  container: {
+    padding: metrics.spacing16,
+    gap: metrics.spacing8,
+    marginBottom: metrics.spacing24,
+  },
+})
+
+// ❌ Avoid - Direct responsive calls
+const styles = StyleSheet.create({
+  container: {
+    padding: responsiveHeight(16), // Use metrics.spacing16 instead
+    gap: responsiveHeight(8), // Use metrics.spacing8 instead
+  },
+})
+```
+
+### Pattern 4: Typography Composition
+
+```typescript
+// ✅ Correct - Compose typography tokens
+const textStyles = {
+  heading: {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights.xl,
+    color: colors.text.primary,
+  },
+  body: {
+    fontSize: fontSizes.md,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.md,
+    color: colors.text.secondary,
+  },
+}
+```
+
+---
+
+## Troubleshooting
+
+### Issue 1: Colors Not Updating
+
+**Problem**: Colors in the app don't reflect Figma values
+
+**Solution**:
+
+1. Clear Metro bundler cache: `npx expo start --clear`
+2. Verify imports use correct paths
+3. Check if old color constants are being imported
+4. Restart development server
+
+### Issue 2: Responsive Values Not Working
+
+**Problem**: Spacing or fonts don't scale properly
+
+**Solution**:
+
+1. Verify `DESIGN_WIDTH` and `DESIGN_HEIGHT` match your design
+2. Check that responsive functions are applied correctly
+3. Ensure `Dimensions.get('window')` is used, not `screen`
+
+### Issue 3: Type Errors with Theme
+
+**Problem**: TypeScript errors when accessing theme values
+
+**Solution**:
+
+1. Ensure all constants use `as const` assertion
+2. Update theme type definitions if using custom types
+3. Rebuild TypeScript: `npx tsc --noEmit`
+
+### Issue 4: Font Not Loading
+
+**Problem**: Custom fonts from Figma not displaying
+
+**Solution**:
+
+1. Verify font files are in `src/assets/fonts/`
+2. Check font loading in `MainLayout.tsx`
+3. Ensure font names match in `fonts.ts` and `useFonts()` call
+4. Run `npx expo install expo-font` if needed
+
+---
+
+## Maintenance
+
+### Regular Updates
+
+1. **Sync with Figma**: Run Step 1 periodically to get latest design tokens
+2. **Update Rules**: Regenerate design system rules when major changes occur
+3. **Deprecate Old Values**: Gradually remove unused legacy values
+4. **Document Changes**: Keep changelog of theme updates
+
+### Version Control
+
+```bash
+# Track theme changes
+git add src/themes/
+git commit -m "chore: update theme tokens from Figma design system"
+
+# Tag major theme updates
+git tag -a theme-v2.0.0 -m "Major theme update with Figma integration"
+```
+
+---
+
+## Summary
+
+This guideline ensures:
+
+- ✅ Consistent design token naming across the codebase
+- ✅ Direct synchronization between Figma and code
+- ✅ Type-safe theme system with TypeScript
+- ✅ Backward compatibility with existing code
+- ✅ Scalable and maintainable theme architecture
+- ✅ Clear documentation for team collaboration
+
+By following these steps, your mobile application will maintain perfect synchronization with your Figma design system, ensuring visual consistency and reducing design-to-code discrepancies.

From 96222dabbb9d87b507b98e98b56f5a012d8619c7 Mon Sep 17 00:00:00 2001
From: "hang.nguyen" <hang.nguyen@saigontechnology.com>
Date: Thu, 2 Oct 2025 13:39:25 +0700
Subject: [PATCH 06/13] feat: add countdown code connect

---
 code-connect/components/Countdown.figma.tsx | 96 +++++++++++++++++++++
 code-connect/figma.config.json              |  3 +-
 2 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 code-connect/components/Countdown.figma.tsx

diff --git a/code-connect/components/Countdown.figma.tsx b/code-connect/components/Countdown.figma.tsx
new file mode 100644
index 0000000..93c4927
--- /dev/null
+++ b/code-connect/components/Countdown.figma.tsx
@@ -0,0 +1,96 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {CountDown, theme, Typography} from 'rn-base-component'
+import {StyleSheet, View} from 'react-native'
+import {metrics} from 'src/helpers'
+
+const COUNT_DOWN_FIGMA_URL = '<FIGMA_COUNT_DOWN>'
+
+const countdownProps = {
+  value: 50000,
+  timeToShow: ['D', 'H', 'M', 'S'],
+  fontSize: theme.fontSizes.lg,
+  fontFamily: theme.fonts.regular,
+  textColor: theme.colors.black,
+  textStyle: {
+    fontFamily: theme.fonts.regular,
+    fontSize: theme.fontSizes.lg,
+    color: theme.colors.black,
+  },
+  unitTextStyle: {
+    fontFamily: theme.fonts.regular,
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.gray,
+  },
+  onFinish: () => {
+    /* TODO: handle onFinish */
+  },
+}
+
+figma.connect(CountDown, COUNT_DOWN_FIGMA_URL, {
+  variant: {type: 'clock_countdown'},
+  props: {
+    ...countdownProps,
+    showLabels: true,
+    timeLabels: {
+      days: 'd',
+      hours: 'h',
+      minutes: 'm',
+      seconds: 's',
+    },
+  },
+  example: props => <CountDown {...props} />,
+})
+
+figma.connect(CountDown, COUNT_DOWN_FIGMA_URL, {
+  variant: {type: 'colon_countdown'},
+  props: {
+    ...countdownProps,
+    separator: ' : ',
+  },
+  example: props => <CountDown {...props} />,
+})
+
+figma.connect(CountDown, COUNT_DOWN_FIGMA_URL, {
+  variant: {type: 'large_text_with_labels'},
+  props: {
+    ...countdownProps,
+    textStyle: {
+      fontFamily: theme.fonts.bold,
+      fontSize: theme.fontSizes.lg,
+      color: theme.colors.black,
+    },
+  },
+  example: props => <CountDown {...props} />,
+})
+
+figma.connect(CountDown, COUNT_DOWN_FIGMA_URL, {
+  variant: {type: 'large_text_with_labels_under'},
+  props: {
+    ...countdownProps,
+  },
+  example: props => (
+    <View style={styles.container}>
+      <CountDown {...props} />
+      <View style={styles.labelsContainer}>
+        {['days', 'hours', 'minutes', 'seconds'].map(item => (
+          <Typography key={item} variant={'regular'}>
+            {item}
+          </Typography>
+        ))}
+      </View>
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  labelsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: metrics.xxs,
+  },
+})
diff --git a/code-connect/figma.config.json b/code-connect/figma.config.json
index 44603cc..58c8a5d 100644
--- a/code-connect/figma.config.json
+++ b/code-connect/figma.config.json
@@ -16,7 +16,8 @@
       "<FIGMA_VERTICAL_RADIO_BUTTONS>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=701-13179",
       "<FIGMA_PROGRESS_LINEAR>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=709-2582",
       "<FIGMA_TYPOGRAPHY>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=3-63",
-      "<FIGMA_ACCORDION>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=773-10315"
+      "<FIGMA_ACCORDION>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=773-10315",
+      "<FIGMA_COUNT_DOWN>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=804-15641"
     }
   }
 }

From 22ac185b2568c7f25925b475ee68ea5eac75aacd Mon Sep 17 00:00:00 2001
From: "hang.nguyen" <hang.nguyen@saigontechnology.com>
Date: Thu, 16 Oct 2025 11:27:53 +0700
Subject: [PATCH 07/13] feat: update button link code connect

---
 code-connect/components/Button.figma.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/code-connect/components/Button.figma.tsx b/code-connect/components/Button.figma.tsx
index 9f695f0..0c34f43 100644
--- a/code-connect/components/Button.figma.tsx
+++ b/code-connect/components/Button.figma.tsx
@@ -7,7 +7,9 @@ import {
   ButtonOutline,
   ButtonTransparent,
   Icon,
+  Text,
 } from 'rn-base-component'
+import {StyleSheet} from 'react-native'
 
 const BUTTON_FIGMA_URL = '<FIGMA_BUTTON>'
 const buttonProps = {
@@ -34,6 +36,12 @@ const buttonProps = {
   }),
 }
 
+const styles = StyleSheet.create({
+  underline: {
+    textDecorationLine: 'underline',
+  },
+})
+
 figma.connect(ButtonPrimary, BUTTON_FIGMA_URL, {
   variant: {type: 'contained', style: 'primary'},
   props: buttonProps,
@@ -60,6 +68,8 @@ figma.connect(ButtonTransparent, BUTTON_FIGMA_URL, {
 
 figma.connect(Button, BUTTON_FIGMA_URL, {
   variant: {type: 'link'},
-  props: buttonProps,
-  example: props => <Button {...props} />,
+  props: {
+    children: figma.string('button_text'),
+  },
+  example: props => <Text {...props} style={styles.underline} />,
 })

From 4c24610675244f290f0ea78e9147533ccc58ab3e Mon Sep 17 00:00:00 2001
From: "hang.nguyen" <hang.nguyen@saigontechnology.com>
Date: Thu, 16 Oct 2025 15:42:23 +0700
Subject: [PATCH 08/13] feat: add search field code connect

---
 code-connect/components/TextInput.figma.tsx | 24 +++++++++++++++++++++
 code-connect/figma.config.json              |  3 ++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/code-connect/components/TextInput.figma.tsx b/code-connect/components/TextInput.figma.tsx
index 72f5f6e..f647df7 100644
--- a/code-connect/components/TextInput.figma.tsx
+++ b/code-connect/components/TextInput.figma.tsx
@@ -4,6 +4,7 @@ import {Icon, TextInput, theme} from 'rn-base-component'
 import {StyleSheet} from 'react-native'
 
 const TEXT_INPUT_FIGMA_URL = '<FIGMA_TEXT_INPUT>'
+const SEARCH_INPUT_FIGMA_URL = '<FIGMA_SEARCH_INPUT>'
 
 const styles = StyleSheet.create({
   errorTextProps: {
@@ -64,6 +65,24 @@ const textInputProps = {
   },
 }
 
+const searchInputProps = {
+  placeholder: figma.textContent('Search'),
+  leftComponent: <Icon source={require('@/assets/images/search.png')} />,
+  rightComponent: figma.boolean('voice_control', {
+    true: <Icon source={require('@/assets/images/voice_control.png')} />,
+    false: undefined,
+  }),
+  onFocus: () => {
+    /* TODO: Handle onFocus */
+  },
+  onBlur: () => {
+    /* TODO: Handle onBlur */
+  },
+  onChangeText: () => {
+    /* TODO: Handle onChangeText */
+  },
+}
+
 figma.connect(TextInput, TEXT_INPUT_FIGMA_URL, {
   variant: {style: 'filled'},
   props: textInputProps,
@@ -81,3 +100,8 @@ figma.connect(TextInput.Outlined, TEXT_INPUT_FIGMA_URL, {
   props: textInputProps,
   example: props => <TextInput.Outlined {...props} />,
 })
+
+figma.connect(TextInput, SEARCH_INPUT_FIGMA_URL, {
+  props: searchInputProps,
+  example: props => <TextInput {...props} />,
+})
diff --git a/code-connect/figma.config.json b/code-connect/figma.config.json
index 58c8a5d..069b90f 100644
--- a/code-connect/figma.config.json
+++ b/code-connect/figma.config.json
@@ -17,7 +17,8 @@
       "<FIGMA_PROGRESS_LINEAR>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=709-2582",
       "<FIGMA_TYPOGRAPHY>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=3-63",
       "<FIGMA_ACCORDION>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=773-10315",
-      "<FIGMA_COUNT_DOWN>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=804-15641"
+      "<FIGMA_COUNT_DOWN>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=804-15641",
+      "<FIGMA_SEARCH_INPUT>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=503-14393"
     }
   }
 }

From 916b4b367b0b5922f8100a341d927d990290fc43 Mon Sep 17 00:00:00 2001
From: "hang.nguyen" <hang.nguyen@saigontechnology.com>
Date: Thu, 23 Oct 2025 17:30:17 +0700
Subject: [PATCH 09/13] feat: mapping code connect code connect new props

---
 code-connect/components/CodeInput.figma.tsx | 45 +++++++++++++++++----
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/code-connect/components/CodeInput.figma.tsx b/code-connect/components/CodeInput.figma.tsx
index d8979e5..1e46887 100644
--- a/code-connect/components/CodeInput.figma.tsx
+++ b/code-connect/components/CodeInput.figma.tsx
@@ -1,15 +1,49 @@
 import React from 'react'
 import figma from '@figma/code-connect'
-import {CodeInput} from 'rn-base-component'
+import {CodeInput, Icon} from 'rn-base-component'
 
 const CODE_INPUTS_FIGMA_URL = '<FIGMA_CODE_INPUTS>'
 
 const codeInputProps = {
+  length: 6,
+  label: figma.boolean('label', {
+    true: figma.string('label_value'),
+    false: undefined,
+  }),
+  error: figma.enum('state', {
+    error: true,
+    enabled: false,
+    success: false,
+  }),
+  errorText: figma.enum('state', {
+    error: figma.textContent('feedback_text'),
+    enabled: undefined,
+    success: undefined,
+  }),
+  success: figma.enum('state', {
+    success: true,
+    enabled: false,
+    error: false,
+  }),
+  helperText: figma.enum('state', {
+    success: figma.textContent('feedback_text'),
+    enabled: undefined,
+    error: undefined,
+  }),
+  rightComponent: figma.boolean('success_icon', {
+    true: <Icon source={require('@/assets/images/success_icon.png')} />,
+    false: figma.enum('state', {
+      error: <Icon source={require('@/assets/images/error_icon.png')} />,
+      enabled: undefined,
+      success: undefined,
+    }),
+  }),
   placeholderAsDot: true,
   withCursor: true,
   secureTextEntry: true,
-  onChange: () => {
-    /* TODO: Handle onChange */
+  autoFocus: true,
+  onChangeText: () => {
+    /* TODO: Handle onChangeText */
   },
   onSubmit: () => {
     /* TODO: Handle onSubmit */
@@ -20,9 +54,6 @@ const codeInputProps = {
 }
 
 figma.connect(CodeInput, CODE_INPUTS_FIGMA_URL, {
-  props: {
-    ...codeInputProps,
-    length: figma.children('otp_input').props.length,
-  },
+  props: codeInputProps,
   example: props => <CodeInput {...props} />,
 })

From fbb2bf7942c9bfd86bf957ec0c964d1e165df4b8 Mon Sep 17 00:00:00 2001
From: Loc NguyenThien <loc.nguyent@saigontechnology.com>
Date: Thu, 23 Oct 2025 22:39:22 +0700
Subject: [PATCH 10/13] feat: mapping wheel picker component

---
 code-connect/components/DatePicker.figma.tsx | 20 ++++++++++++++++++++
 code-connect/figma.config.json               |  3 ++-
 code-connect/package.json                    |  1 +
 code-connect/yarn.lock                       |  5 +++++
 4 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 code-connect/components/DatePicker.figma.tsx

diff --git a/code-connect/components/DatePicker.figma.tsx b/code-connect/components/DatePicker.figma.tsx
new file mode 100644
index 0000000..8ab3934
--- /dev/null
+++ b/code-connect/components/DatePicker.figma.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import DatePicker from 'react-native-date-picker'
+import figma from '@figma/code-connect'
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  DatePicker,
+  'https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=924-13429&m=dev',
+  {
+    props: {},
+    example: props => <DatePicker mode="date" date={new Date()} {...props} />,
+  },
+)
diff --git a/code-connect/figma.config.json b/code-connect/figma.config.json
index 069b90f..bfc1d9c 100644
--- a/code-connect/figma.config.json
+++ b/code-connect/figma.config.json
@@ -18,7 +18,8 @@
       "<FIGMA_TYPOGRAPHY>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=3-63",
       "<FIGMA_ACCORDION>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=773-10315",
       "<FIGMA_COUNT_DOWN>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=804-15641",
-      "<FIGMA_SEARCH_INPUT>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=503-14393"
+      "<FIGMA_SEARCH_INPUT>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=503-14393",
+      "<FIGMA_WHEEL_PICKER>": "https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=924-13429"
     }
   }
 }
diff --git a/code-connect/package.json b/code-connect/package.json
index e5d0745..151a60e 100644
--- a/code-connect/package.json
+++ b/code-connect/package.json
@@ -21,6 +21,7 @@
   "license": "MIT",
   "dependencies": {
     "@figma/code-connect": "^1.3.5",
+    "react-native-date-picker": "^5.0.13",
     "rn-base-component": "file:../"
   },
   "devDependencies": {
diff --git a/code-connect/yarn.lock b/code-connect/yarn.lock
index e83dc81..129d6e0 100644
--- a/code-connect/yarn.lock
+++ b/code-connect/yarn.lock
@@ -916,6 +916,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+react-native-date-picker@^5.0.13:
+  version "5.0.13"
+  resolved "https://registry.yarnpkg.com/react-native-date-picker/-/react-native-date-picker-5.0.13.tgz#fe05f58652aaeee9e67f73cf7436c32a623ff3a4"
+  integrity sha512-qCLUODZVsJetO5zuoXjw1D39K527XWqBG8sOfhWdHyPzf13h8RXR1/RSKd1N0fdRDi5GdyizYmB0lPAK12/hbw==
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"

From 4df3cba773278da9c1192bf3058fd4c9ac6e0fd7 Mon Sep 17 00:00:00 2001
From: "hang.nguyen" <hang.nguyen@saigontechnology.com>
Date: Fri, 24 Oct 2025 11:35:19 +0700
Subject: [PATCH 11/13] feat: update document file

---
 .../Mobile_Figma_Variables_Setup_Guide.md     | 1153 ++++++++++++++---
 code-connect/docs/Variable_Update_Workflow.md |  795 ++++++++++++
 2 files changed, 1755 insertions(+), 193 deletions(-)
 create mode 100644 code-connect/docs/Variable_Update_Workflow.md

diff --git a/code-connect/docs/Mobile_Figma_Variables_Setup_Guide.md b/code-connect/docs/Mobile_Figma_Variables_Setup_Guide.md
index 2947422..8e77002 100644
--- a/code-connect/docs/Mobile_Figma_Variables_Setup_Guide.md
+++ b/code-connect/docs/Mobile_Figma_Variables_Setup_Guide.md
@@ -1,11 +1,10 @@
-# Mobile Theme Setup Guideline with Figma MCP
+# Mobile Theme Setup Guideline with Figma Variables
 
-This document provides step-by-step instructions for setting up and synchronizing mobile theme variables from Figma designs using Figma MCP (Model Context Protocol).
+This document provides step-by-step instructions for AI agents to set up and synchronize mobile theme variables from exported Figma variable JSON files.
 
 ## Prerequisites
 
-- Figma MCP installed and configured in your development environment
-- Access to the Figma design file with proper permissions
+- Exported Figma variable JSON files from designers (one or more collection files)
 - Existing project structure with theme files:
   - `src/themes/colors.ts`
   - `src/themes/metrics.ts`
@@ -16,69 +15,448 @@ This document provides step-by-step instructions for setting up and synchronizin
 
 The theme setup process consists of three main steps:
 
-1. **Extract variables** from Figma using MCP
+1. **Extract variables** from exported Figma JSON files (provided by designers)
 2. **Transform and organize** variables into appropriate theme files
 3. **Create design system rules** for consistent usage
 
 ---
 
-## Step 1: Extract Variables from Figma
+## 🚨 CRITICAL RULES - READ FIRST
 
-### 1.1 Get the Figma Node ID
+**MANDATORY Requirements for AI Agents:**
 
-Extract the node ID from your Figma URL:
+1. **🚨 NEVER AUTO-SELECT MODE NAMES**
+   - When a JSON file contains multiple modes (e.g., "STS_base", "STS_dark", "Boro_USA_theme"), you MUST ask the user which mode to use
+   - DO NOT proceed with extraction until user confirms the mode selection
+   - DO NOT assume or guess which mode the user wants
 
+2. **🚨 ALWAYS ASK USER BEFORE PROCEEDING**
+   - If multiple modes exist in ANY collection, STOP immediately
+   - Present all available modes to the user
+   - Wait for explicit confirmation before continuing
+
+3. **🚨 BLOCK EXTRACTION UNTIL CONFIRMATION**
+   - No variable extraction should begin until mode selection is confirmed
+   - This is a BLOCKING checkpoint - you cannot skip it
+
+4. **🚨 PROJECT VARIABLES OVERRIDE CORE VARIABLES**
+   - When the same variable exists in both Core_variables.json and project JSON, use the project JSON value
+   - Example: If `spacing.16` exists in both files, the project JSON value takes precedence
+
+---
+
+## Step 1: Extract Variables from Exported JSON Files
+
+## 1.0 Understanding the Two-File Workflow
+
+### Overview
+
+Users will typically provide **TWO** JSON files exported from Figma:
+
+1. **Core_variables.json** (Base Design Tokens)
+   - Contains foundational design tokens
+   - Usually has a **single mode** called "Value"
+   - Includes: spacing, radius, base color palettes, typography scales, icon sizes, shadows
+   - Example structure:
+   ```json
+   {
+     "collections": [{
+       "name": "Core_variables",
+       "modes": ["Value"],
+       "variables": {
+         "spacing": { "16": { "type": "number", "values": { "Value": 16 } } },
+         "color": { "Red": { "50": { "type": "color", "values": { "Value": "#ff6467" } } } }
+       }
+     }]
+   }
+   ```
+
+2. **Project-Specific JSON** (e.g., STS_Variables.json)
+   - Contains semantic/project-specific variables
+   - **Often has MULTIPLE modes** (e.g., "STS_base", "STS_dark", "Boro_USA_theme")
+   - May reference or override core variables
+   - Includes theme-specific colors, semantic color names
+   - Example structure:
+   ```json
+   {
+     "collections": [{
+       "name": "STS_Variables",
+       "modes": ["STS_base", "STS_dark", "Boro_USA_theme"],
+       "variables": {
+         "color": {
+           "gray": {
+             "10": {
+               "type": "color",
+               "values": {
+                 "STS_base": "Core_variables:color/Neutral/10",
+                 "STS_dark": "Core_variables:color/Neutral/A200",
+                 "Boro_USA_theme": "Core_variables:color/Stone/10"
+               }
+             }
+           }
+         }
+       }
+     }]
+   }
+   ```
+
+### Variable Override Behavior
+
+**IMPORTANT:** When a variable name appears in BOTH files:
+- ✅ **Project JSON value OVERRIDES Core JSON value**
+- This allows project-specific customization while maintaining core tokens
+
+**Example:**
 ```
-URL Format: https://figma.com/design/:fileKey/:fileName?node-id=1-2
-Node ID Format: 1:2 (replace dash with colon)
+Core_variables.json:
+  spacing.16.values.Value = 16
 
-Example:
-URL: https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Project?node-id=9-55163
-Node ID: 9:55163
+STS_Variables.json:
+  spacing.16.values.STS_base = 20
+
+Result: Use 20 (from project JSON)
 ```
 
-### 1.2 Run MCP Command
+### Processing Order
 
-Use the Figma MCP `get_variable_defs` tool to extract all design variables:
+1. Read Core_variables.json first (usually single mode)
+2. Read Project JSON second (may have multiple modes)
+3. **🚨 STOP if multiple modes detected - ask user for mode selection**
+4. After confirmation, extract variables with project values overriding core values
 
-```typescript
-mcp_Figma_get_variable_defs({
-  nodeId: '9:55163',
-  clientLanguages: 'typescript',
-  clientFrameworks: 'react',
-})
-```
+---
+
+### 1.1 Obtain Exported Variable JSON Files from Designers
 
-### 1.3 Review Extracted Variables
+Designers will export Figma variables as JSON files. You may receive one or multiple collection files:
 
-The MCP will return variables in the following categories:
+**Example files**:
+- `Core_variables.json` - Core design tokens (spacing, radius, base colors, typography)
+- `STS_Variables.json` - Project-specific semantic variables (may include multiple themes/modes)
+- Additional brand or theme-specific collections
+
+**Where to place files**: Ask the user where they've placed the JSON files, or suggest placing them in:
+```
+code-connect/figma-exports/
+```
 
-- **Colors**: Text, background, foreground, border, feedback colors, and color palettes
-- **Typography**: Font families, sizes, weights, line heights
-- **Spacing**: Padding and margin values
-- **Radius**: Border radius values
-- **Icon Sizes**: Standard icon dimensions
+### 1.2 Understanding the JSON Structure
 
-Example output format:
+Exported Figma variable files follow this structure:
 
 ```json
 {
-  "color/text/text-primary": "#hexValue",
-  "typography/font-size/text/md": "number",
-  "spacing/8": "number",
-  "radius/8": "number",
-  "icon-size/24": "number"
+  "collections": [
+    {
+      "name": "Core_variables",
+      "modes": ["Value"],
+      "variables": {
+        "spacing": {
+          "16": {
+            "type": "number",
+            "values": {
+              "Value": 16
+            }
+          }
+        },
+        "color": {
+          "Neutral": {
+            "10": {
+              "type": "color",
+              "values": {
+                "Value": "#fcfcfc"
+              }
+            }
+          }
+        }
+      }
+    }
+  ]
 }
 ```
 
-**Note:** The actual values will depend on your Figma design system.
+**Key structure elements**:
+- `collections[]` - Array of variable collections
+- `name` - Collection name (e.g., "Core_variables", "STS_Variables")
+- `modes[]` - Array of mode names (e.g., ["Value"], ["STS_base", "STS_dark", "Boro_USA_theme"])
+- `variables` - Nested object containing all variables by category
+- `type` - Variable type: "number", "color", or "string"
+- `values` - Object with mode names as keys and actual values
+
+### 1.3 Read and Parse JSON Files
+
+**Instructions for AI**:
+
+#### Step 1: Ask for File Paths
+
+Ask user for the paths to BOTH JSON files:
+```
+"Please provide the paths to the exported Figma variable JSON files:
+1. Core_variables.json (base design tokens)
+2. Project-specific variables JSON (e.g., STS_Variables.json)"
+```
+
+#### Step 2: Read JSON Files
+
+Read each JSON file using the Read tool:
+```typescript
+Read({ file_path: "/path/to/Core_variables.json" })
+Read({ file_path: "/path/to/STS_Variables.json" })
+```
+
+#### Step 3: Detect Multiple Modes (CRITICAL CHECKPOINT)
+
+**🚨 MANDATORY MODE DETECTION:**
+
+After reading each JSON file, immediately check the `modes` array:
+
+```typescript
+// Example detection logic
+const collection = jsonData.collections[0]
+const modes = collection.modes
+
+if (modes.length > 1) {
+  // 🚨 STOP - Multiple modes detected!
+  // MUST ask user before proceeding
+}
+```
+
+**Examples:**
+- ✅ Single mode: `"modes": ["Value"]` → Proceed automatically
+- 🚨 Multiple modes: `"modes": ["STS_base", "STS_dark", "Boro_USA_theme"]` → **STOP and ask user**
+
+#### Step 4: Ask User for Mode Selection (IF MULTIPLE MODES EXIST)
+
+**🚨 THIS IS A BLOCKING CHECKPOINT - DO NOT SKIP**
+
+If multiple modes are detected in ANY collection:
+
+1. **STOP all extraction immediately**
+2. **List all available modes to the user**
+3. **Ask which mode to use**
+4. **Wait for explicit user confirmation**
+5. **Only proceed after receiving confirmation**
+
+**Required Question Template:**
+
+```
+🚨 MULTIPLE MODES DETECTED in [collection_name]
+
+I found [X] modes in this collection:
+- Mode 1: "[mode_name_1]"
+- Mode 2: "[mode_name_2]"
+- Mode 3: "[mode_name_3]"
+
+Which mode would you like to use for theme variable extraction?
+
+Please confirm the mode name exactly as shown above.
+```
+
+**Example:**
+
+```
+🚨 MULTIPLE MODES DETECTED in STS_Variables
+
+I found 3 modes in this collection:
+- Mode 1: "STS_base"
+- Mode 2: "STS_dark"
+- Mode 3: "Boro_USA_theme"
+
+Which mode would you like to use for theme variable extraction?
+
+Please confirm the mode name exactly as shown above.
+```
+
+#### Step 5: Record User's Mode Selection
+
+After user responds, record their selection:
+```
+✅ User confirmed mode: "[selected_mode_name]"
+
+I will now extract all variable values using the "[selected_mode_name]" mode.
+Proceeding with extraction...
+```
+
+**🚨 ANTI-PATTERNS (WHAT NOT TO DO):**
+
+❌ **NEVER do this:**
+```
+// WRONG - Auto-selecting first mode
+const selectedMode = modes[0] // DON'T DO THIS!
+```
+
+❌ **NEVER do this:**
+```
+// WRONG - Assuming a mode without asking
+"I'll use STS_base mode..." // DON'T DO THIS!
+```
+
+❌ **NEVER do this:**
+```
+// WRONG - Proceeding without waiting for confirmation
+"I found multiple modes. Let me extract using STS_base..." // DON'T DO THIS!
+```
+
+✅ **CORRECT approach:**
+```
+// RIGHT - Always ask and wait
+"I found 3 modes: STS_base, STS_dark, Boro_USA_theme. Which mode should I use?"
+// WAIT for user response
+// THEN proceed with user-selected mode
+```
+
+#### Step 6: Parse and Extract Variables
+
+**Only after mode selection is confirmed**, parse and extract variables:
+
+- Identify all collections in each file
+- Note the modes available in each collection
+- Extract variables by category (spacing, radius, color, typography, etc.)
+- **Use the user-confirmed mode name** when accessing values from the `values` object
+
+**Example value extraction:**
+```typescript
+// Using user-confirmed mode (e.g., "STS_base")
+const selectedMode = "STS_base" // From user confirmation
+const value = variable.values[selectedMode]
+
+// NOT: const value = variable.values[modes[0]] ❌
+```
+
+#### Step 7: Categorize Extracted Variables
+
+- **Spacing**: `variables.spacing.*`
+- **Radius**: `variables.radius.*`
+- **Colors**: `variables.color.*` (often nested: color.Category.Shade)
+- **Typography**: `variables.typography.font-size.*`, `variables.typography.font-weight.*`, etc.
+- **Icon Sizes**: `variables.icon-size.*`
+- **Shadows**: `variables.shadow.*` (complex nested structure)
+
+#### Step 8: Handle Variable Overrides
+
+When merging Core_variables.json and Project JSON:
+- If a variable path exists in BOTH files, use the **Project JSON value**
+- Example: `spacing.16` in both files → Use project JSON value
+- Document overridden variables with comments if helpful
+
+### 1.4 Variable Categories Found in JSON Files
+
+Based on the JSON structure, you will typically find:
+
+**Core Design Tokens** (often in Core_variables.json):
+- Spacing values: `spacing.0`, `spacing.4`, `spacing.8`, `spacing.16`, etc.
+- Radius values: `radius.none`, `radius.xs`, `radius.sm`, `radius.md`, `radius.full`
+- Base color palettes: `color.Neutral.*`, `color.Red.*`, `color.Blue.*`, etc. (with numeric shades)
+- Icon sizes: `icon-size.16`, `icon-size.24`, `icon-size.32`
+- Typography scales: `typography.font-size.*`, `typography.font-weight.*`, `typography.line-height.*`
+- Shadow properties: `shadow.position.x.*`, `shadow.position.y.*`, `shadow.blur.*`, `shadow.spread.*`
+
+**Semantic Variables** (often in project-specific JSON files):
+- May reference or override core tokens
+- May include multiple themes/modes
+- Often include semantic color names mapped to base colors
+
+**Note**: The actual categories and structure will depend on your Figma design system setup.
 
 ---
 
 ## Step 2: Transform and Organize Variables
 
+### 2.0 Understanding JSON-to-Code Transformation
+
+**AI Instructions for extracting values from JSON**:
+
+**🚨 REMINDER: Use User-Confirmed Mode**
+- Before starting any extraction, ensure you have the user-confirmed mode name from Step 1.3
+- If you did not get mode confirmation yet, STOP and ask the user
+- All `values.{modeName}` references must use the exact mode name the user confirmed
+
+**Extraction Process:**
+
+1. **Access nested structure**: Navigate through `collections[i].variables.{category}.{subcategory}.{name}`
+2. **Extract value by mode**: Get the value using the **user-confirmed** mode name from `values.{modeName}`
+   - ✅ Use: `variable.values[userConfirmedMode]`
+   - ❌ Don't use: `variable.values[modes[0]]` or `variable.values["STS_base"]` (hardcoded)
+3. **Handle type conversions**:
+   - `type: "color"` → Use hex value directly (e.g., "#fcfcfc")
+   - `type: "number"` → Use numeric value, apply responsive functions for metrics
+   - `type: "string"` → Use string value directly (e.g., font family names)
+4. **Apply override rules**:
+   - If the same variable exists in both Core_variables.json and Project JSON, use the **Project JSON value**
+   - Always check both files before deciding which value to use
+
+**Example JSON value extraction**:
+
+```typescript
+// Example 1: Single mode (Core_variables.json)
+// Variable at: collections[0].variables.spacing.16
+// With mode "Value"
+{
+  "16": {
+    "type": "number",
+    "values": {
+      "Value": 16
+    }
+  }
+}
+// ✅ Extract using mode "Value": 16 → Transform: metrics.spacing16 = responsiveHeight(16)
+
+// Example 2: Multiple modes (STS_Variables.json)
+// Variable at: collections[0].variables.color.gray.10
+// User confirmed mode: "STS_base"
+{
+  "10": {
+    "type": "color",
+    "values": {
+      "STS_base": "#fcfcfc",
+      "STS_dark": "#1a1a1a",
+      "Boro_USA_theme": "#fafaf9"
+    }
+  }
+}
+// ✅ CORRECT: Extract using user-confirmed mode "STS_base": "#fcfcfc"
+// ❌ WRONG: Extract using modes[0] or hardcoded mode name
+
+const userConfirmedMode = "STS_base" // From Step 1.3 user confirmation
+const value = variable.values[userConfirmedMode] // "#fcfcfc"
+// NOT: const value = variable.values[modes[0]] ❌
+// NOT: const value = variable.values["STS_base"] ❌ (unless user confirmed this exact string)
+```
+
+**Handling multiple collections and file merging**:
+
+1. **Process Core_variables.json first**:
+   - Extract all variables using mode "Value" (usually single mode)
+   - Store in memory
+
+2. **Process Project JSON second** (e.g., STS_Variables.json):
+   - Extract all variables using **user-confirmed mode**
+   - Check if variable already exists from Core_variables.json
+   - **Override rule**: Project JSON values ALWAYS override Core JSON values
+
+3. **Example override scenario**:
+   ```typescript
+   // Core_variables.json
+   spacing.16.values.Value = 16
+
+   // STS_Variables.json (user confirmed mode: "STS_base")
+   spacing.16.values.STS_base = 20
+
+   // ✅ RESULT: Use 20 (Project JSON overrides Core JSON)
+   // In code: metrics.spacing16 = responsiveHeight(20)
+   ```
+
+4. **Document overrides**:
+   - Add comments when project values override core values
+   - Example: `spacing16: responsiveHeight(20), // Overridden from Core (was 16)`
+
 ### 2.1 COLORS - Update `src/themes/colors.ts`
 
+**🚨 BEFORE YOU START:**
+- Ensure you have the user-confirmed mode name from Step 1.3
+- When extracting color values, use `variable.values[userConfirmedMode]`
+- Apply override rule: Project JSON colors override Core JSON colors
+
 #### 2.1.1 Naming Convention Rules
 
 **MANDATORY RULES:**
@@ -140,31 +518,55 @@ const colors = {
 
 **Implementation Steps:**
 
-1. Run `get_variable_defs` to extract all Figma color variables
-2. Identify hierarchy patterns in variable names
-3. Create nested objects matching Figma structure
-4. Convert names to camelCase (remove hyphens/underscores)
-5. Replace `#hexValue` with actual Figma values
+1. Extract all color variables from `variables.color` in JSON files
+2. Identify hierarchy patterns: Check nesting levels (color.category.name vs color.category.subcategory.name)
+3. Determine if color belongs in `colors` (semantic) or `palette` (scale-based with numbers)
+4. Create nested objects matching JSON structure
+5. Convert category names to camelCase (e.g., "text-primary" → "primary", "Red" → "red")
+6. Extract color values from the selected mode (e.g., `.values.Value` or `.values.STS_base`)
 
-**Example Transformation:**
+**Example Transformation from JSON:**
 
 ```typescript
-// Figma Variables:
-"color/text/text-primary": "#123456"
-"color/background/bg-primary": "#ffffff"
-"color/feedback/error/text": "#ff0000"
+// JSON Structure:
+{
+  "variables": {
+    "color": {
+      "text": {
+        "text-primary": {
+          "type": "color",
+          "values": { "Value": "#123456" }
+        }
+      },
+      "background": {
+        "bg-primary": {
+          "type": "color",
+          "values": { "Value": "#ffffff" }
+        }
+      },
+      "feedback": {
+        "error": {
+          "text": {
+            "type": "color",
+            "values": { "Value": "#ff0000" }
+          }
+        }
+      }
+    }
+  }
+}
 
 // Code Implementation:
 const colors = {
   text: {
-    primary: '#123456',
+    primary: '#123456',      // from color.text.text-primary.values.Value
   },
   background: {
-    primary: '#ffffff',
+    primary: '#ffffff',      // from color.background.bg-primary.values.Value
   },
   feedback: {
     error: {
-      text: '#ff0000',
+      text: '#ff0000',       // from color.feedback.error.text.values.Value
     },
   },
 } as const
@@ -202,27 +604,48 @@ const palette = {
 
 **Implementation Steps:**
 
-1. Identify numeric patterns in Figma variables (`/50`, `/100`, `/500`)
-2. Group by color name (all red shades together)
-3. Use underscore prefix for numbers (`50` → `_50`)
-4. Only include colors with multiple numeric variants
+1. Identify numeric patterns in JSON color variables (e.g., `color.Red.10`, `color.Blue.50`)
+2. Look for color categories with numeric keys (10, 20, 50, 100, etc.)
+3. Group by color name (all Red shades together, all Blue shades together)
+4. Convert category name to lowercase camelCase (e.g., "Red" → "red", "Neutral" → "neutral")
+5. Use underscore prefix for numeric keys (`10` → `_10`, `100` → `_100`)
+6. Extract hex values from selected mode
 
-**Example Transformation:**
+**Example Transformation from JSON:**
 
 ```typescript
-// Figma Variables:
-"color/red/100": "#ffcccc"
-"color/red/500": "#ff0000"
-"color/blue/300": "#6699ff"
+// JSON Structure:
+{
+  "variables": {
+    "color": {
+      "Red": {
+        "100": {
+          "type": "color",
+          "values": { "Value": "#ffcccc" }
+        },
+        "500": {
+          "type": "color",
+          "values": { "Value": "#ff0000" }
+        }
+      },
+      "Blue": {
+        "300": {
+          "type": "color",
+          "values": { "Value": "#6699ff" }
+        }
+      }
+    }
+  }
+}
 
 // Code Implementation:
 const palette = {
-  red: {
-    _100: '#ffcccc',
-    _500: '#ff0000',
+  red: {                              // from color.Red (lowercase)
+    _100: '#ffcccc',                  // from color.Red.100.values.Value
+    _500: '#ff0000',                  // from color.Red.500.values.Value
   },
-  blue: {
-    _300: '#6699ff',
+  blue: {                             // from color.Blue (lowercase)
+    _300: '#6699ff',                  // from color.Blue.300.values.Value
   },
 } as const
 ```
@@ -270,6 +693,11 @@ export {colors, palette, getColorOpacity}
 
 ### 2.2 SPACING, RADIUS, ICON SIZE - Update `src/themes/metrics.ts`
 
+**🚨 BEFORE YOU START:**
+- Ensure you have the user-confirmed mode name from Step 1.3
+- When extracting metric values, use `variable.values[userConfirmedMode]`
+- Apply override rule: Project JSON metrics override Core JSON metrics
+
 #### 2.2.1 Naming Convention Rules
 
 **MANDATORY RULES:**
@@ -335,9 +763,15 @@ const metrics = {
 
 **Implementation Steps:**
 
-1. Add Figma spacing values: `spacing/X` → `spacingX: responsiveHeight(X)`
-2. Add Figma radius values: `radius/X` → `radiusX: responsiveHeight(X)`
-3. Add Figma icon sizes: `icon-size/X` → `iconSizeX: responsiveHeight(X)`
+1. Extract spacing values from `variables.spacing` in JSON files
+   - Convert: `spacing.16.values.{mode}` → `spacingX: responsiveHeight(X)`
+   - Handle both numeric keys (16) and named keys (if any)
+2. Extract radius values from `variables.radius` in JSON files
+   - Convert: `radius.md.values.{mode}` → `radiusMd: responsiveHeight(value)`
+   - Convert: `radius.8.values.{mode}` → `radius8: responsiveHeight(8)`
+   - Special case: `radius.round` with value 1000 → `radiusRound: responsiveHeight(1000)`
+3. Extract icon sizes from `variables.icon-size` in JSON files (if present)
+   - Convert: `icon-size.24.values.{mode}` → `iconSize24: responsiveHeight(24)`
 4. Keep existing legacy values for backward compatibility
 
 #### 2.2.3 Update Strategy
@@ -353,6 +787,11 @@ When updating metrics:
 
 ### 2.3 TYPOGRAPHY - Update `src/themes/metrics.ts`
 
+**🚨 BEFORE YOU START:**
+- Ensure you have the user-confirmed mode name from Step 1.3
+- When extracting typography values, use `variable.values[userConfirmedMode]`
+- Apply override rule: Project JSON typography overrides Core JSON typography
+
 #### 2.3.1 Font Sizes
 
 **Template Structure:**
@@ -415,10 +854,20 @@ const lineHeights = {
 
 **Implementation Steps:**
 
-1. Map Figma font sizes: `typography/font-size/text/md` → `fontSizes.md`
-2. Map Figma font weights: `typography/font-weight/medium` → `fontWeights.medium`
-3. Update font family names to match your actual fonts
-4. Add line heights if your design system uses them
+1. Extract font sizes from `variables.typography.font-size` in JSON files
+   - Convert: `typography.font-size.md.values.{userConfirmedMode}` → `fontSizes.md: responsiveFont(value)`
+   - ✅ Use user-confirmed mode: `variable.values[userConfirmedMode]`
+   - Handle all size keys (xs, sm, md, lg, xl, 2xl, etc.)
+2. Extract font weights from `variables.typography.font-weight` in JSON files
+   - Convert: `typography.font-weight.medium.values.{userConfirmedMode}` → `fontWeights.medium: 'value'`
+   - ✅ Use user-confirmed mode: `variable.values[userConfirmedMode]`
+   - Convert numeric values to strings (500 → '500')
+3. Extract font family from `variables.typography.font-family` in JSON files
+   - Get string value from user-confirmed mode: `variable.values[userConfirmedMode]`
+   - Update font family names in `fonts.ts` to match actual font file names
+4. Extract line heights from `variables.typography.line-height` (if present)
+   - Convert: `typography.line-height.md.values.{userConfirmedMode}` → `lineHeights.md: responsiveHeight(value)`
+   - ✅ Use user-confirmed mode: `variable.values[userConfirmedMode]`
 
 ---
 
@@ -426,17 +875,32 @@ const lineHeights = {
 
 ### 3.1 Purpose of Design System Rules
 
-The design system rules file acts as a **bridge** between Figma variables and your code implementation. When AI generates code from Figma designs using `get_code`, it needs to know how to translate Figma variable names to your actual theme tokens.
+The design system rules file acts as a **bridge** between Figma variables and your code implementation. It supports **TWO** variable sources:
+
+1. **JSON Exports** (Setup Phase): Used to initially set up theme variables in your codebase
+2. **MCP `get_variable_defs`** (Implementation Phase): Used when AI generates code from Figma designs
+
+**Why Both Formats?**
+
+- **JSON exports** → Set up complete theme system with all variables (Step 1-2 of this guide)
+- **MCP `get_variable_defs`** → Extract variables from specific Figma designs during code generation
+- **Design system rules** → Map BOTH formats to the same code tokens for consistency
+
+**Example Mappings:**
+
+**From JSON (nested structure):**
+- JSON path: `variables.spacing.4` → Code: `metrics.spacing4`
+- JSON path: `variables.color.text.text-primary` → Code: `colors.text.primary`
 
-**Example Mapping:**
+**From MCP (flat path):**
+- MCP path: `spacing/4` → Code: `metrics.spacing4`
+- MCP path: `color/text/text-primary` → Code: `colors.text.primary`
 
-- Figma variable: `spacing/4` → Code: `metrics.spacing4`
-- Figma variable: `color/text/text-primary` → Code: `colors.text.primary`
-- Figma variable: `typography/font-size/text/md` → Code: `fontSizes.md`
+**Both paths → Same code implementation** ✅
 
 **This file also includes:**
 
-- ✅ Complete variable mapping tables (colors, spacing, radius, typography)
+- ✅ Dual-format variable mapping tables (JSON paths + MCP paths → Code)
 - ✅ Theming system rules (metrics reuse, platform detection)
 - ✅ Styling constraints (no inline styles, no hardcoded values)
 - ✅ Code generation rules and best practices
@@ -465,70 +929,104 @@ import {fonts} from '@/themes/fonts'
 
 ## 1. COLOR VARIABLE MAPPING
 
-Create tables for EACH color category found in your Figma design:
+**IMPORTANT: Include BOTH JSON and MCP paths for complete mapping**
 
-### Example: Text Colors
+Create tables for EACH color category found in your Figma JSON exports:
 
-| Figma Variable              | Code Implementation     | Hex Value |
-| --------------------------- | ----------------------- | --------- |
-| `color/text/text-primary`   | `colors.text.primary`   | #hexValue |
-| `color/text/text-secondary` | `colors.text.secondary` | #hexValue |
-| ...                         | ...                     | ...       |
+### Example: Text Colors (Semantic Colors)
 
-### Example: Background Colors
+| JSON Path                               | MCP Path                     | Code Implementation     | Hex Value |
+| --------------------------------------- | ---------------------------- | ----------------------- | --------- |
+| `variables.color.text.text-primary`     | `color/text/text-primary`    | `colors.text.primary`   | #292929   |
+| `variables.color.text.text-secondary`   | `color/text/text-secondary`  | `colors.text.secondary` | #656565   |
+| `variables.color.text.text-tertiary`    | `color/text/text-tertiary`   | `colors.text.tertiary`  | #656565   |
+| ...                                     | ...                          | ...                     | ...       |
 
-| Figma Variable                  | Code Implementation           | Hex Value |
-| ------------------------------- | ----------------------------- | --------- |
-| `color/background/bg-primary`   | `colors.background.primary`   | #hexValue |
-| `color/background/bg-secondary` | `colors.background.secondary` | #hexValue |
-| ...                             | ...                           | ...       |
+### Example: Icon Colors
 
-### Example: Border Colors
+| JSON Path                            | MCP Path                  | Code Implementation  | Hex Value |
+| ------------------------------------ | ------------------------- | -------------------- | --------- |
+| `variables.color.icon.white`         | `color/icon/white`        | `colors.icon.white`  | #fcfcfc   |
+| `variables.color.icon.primary`       | `color/icon/primary`      | `colors.icon.primary`| #292929   |
+| ...                                  | ...                       | ...                  | ...       |
 
-| Figma Variable                | Code Implementation     | Hex Value |
-| ----------------------------- | ----------------------- | --------- |
-| `color/border/border-primary` | `colors.border.primary` | #hexValue |
-| ...                           | ...                     | ...       |
+### Example: Background Colors (Semantic Colors)
 
-### Example: Feedback Colors
+| JSON Path                                   | MCP Path                           | Code Implementation           | Hex Value |
+| ------------------------------------------- | ---------------------------------- | ----------------------------- | --------- |
+| `variables.color.background.layer-01`       | `color/background/layer-01`        | `colors.background.layer01`   | #efefef   |
+| `variables.color.background.layer-02`       | `color/background/layer-02`        | `colors.background.layer02`   | #fcfcfc   |
+| ...                                         | ...                                | ...                           | ...       |
 
-| Figma Variable                      | Code Implementation                  | Hex Value |
-| ----------------------------------- | ------------------------------------ | --------- |
-| `color/feedback/success/text`       | `colors.feedback.success.text`       | #hexValue |
-| `color/feedback/success/background` | `colors.feedback.success.background` | #hexValue |
-| `color/feedback/error/text`         | `colors.feedback.error.text`         | #hexValue |
-| ...                                 | ...                                  | ...       |
+### Example: Button Colors
 
-### Example: Color Palette (Base Colors)
+| JSON Path                       | MCP Path                  | Code Implementation    | Hex Value |
+| ------------------------------- | ------------------------- | ---------------------- | --------- |
+| `variables.color.button.primary`| `color/button/primary`    | `colors.button.primary`| #78b032   |
+| ...                             | ...                       | ...                    | ...       |
 
-| Figma Variable   | Code Implementation | Hex Value |
-| ---------------- | ------------------- | --------- |
-| `color/red/50`   | `palette.red._50`   | #hexValue |
-| `color/red/100`  | `palette.red._100`  | #hexValue |
-| `color/blue/500` | `palette.blue._500` | #hexValue |
-| ...              | ...                 | ...       |
+### Example: Feedback Colors (Semantic Colors)
+
+| JSON Path                                       | MCP Path                                    | Code Implementation                  | Hex Value |
+| ----------------------------------------------- | ------------------------------------------- | ------------------------------------ | --------- |
+| `variables.color.feedback.success.text`         | `color/feedback/text/success`               | `colors.feedback.success.text`       | #hexValue |
+| `variables.color.feedback.success.background`   | `color/feedback/background/success`         | `colors.feedback.success.background` | #hexValue |
+| `variables.color.feedback.error.text`           | `color/feedback/text/error`                 | `colors.feedback.error.text`         | #hexValue |
+| ...                                             | ...                                         | ...                                  | ...       |
+
+### Example: Color Palette (Base Colors with Numeric Scales)
+
+| JSON Path                    | MCP Path           | Code Implementation   | Hex Value |
+| ---------------------------- | ------------------ | --------------------- | --------- |
+| `variables.color.Red.10`     | `color/Red/10`     | `palette.red._10`     | #fef2f2   |
+| `variables.color.Red.50`     | `color/Red/50`     | `palette.red._50`     | #ff6467   |
+| `variables.color.Red.100`    | `color/Red/100`    | `palette.red._100`    | #82181a   |
+| `variables.color.Blue.50`    | `color/Blue/50`    | `palette.blue._50`    | #51a2ff   |
+| `variables.color.Neutral.10` | `color/Neutral/10` | `palette.neutral._10` | #fcfcfc   |
+| ...                          | ...                | ...                   | ...       |
 
 **Instructions:**
 
-- List ALL color variables from your Figma `get_variable_defs` output
-- Group by category (text, background, border, feedback, etc.)
+- List ALL color variables from your exported JSON files
+- **Include BOTH JSON path AND MCP path** for each variable
+- Group by category (text, icon, background, button, border, feedback for semantic colors)
+- Separate palette colors (those with numeric scales like Neutral.10, Red.50) into their own section
 - Include the hex value for reference
-- Adapt categories based on your actual Figma structure
+- **MCP path format**: Remove `variables.` prefix, use slashes instead of dots
+
+**Path Conversion Examples:**
+```
+JSON: variables.color.text.text-primary  → MCP: color/text/text-primary
+JSON: variables.color.icon.white         → MCP: color/icon/white
+JSON: variables.color.Red.50             → MCP: color/Red/50
+```
 
 ## 2. SPACING VARIABLE MAPPING
 
-| Figma Variable | Code Implementation | Value |
-| -------------- | ------------------- | ----- |
-| `spacing/4`    | `metrics.spacing4`  | 4px   |
-| `spacing/8`    | `metrics.spacing8`  | 8px   |
-| `spacing/16`   | `metrics.spacing16` | 16px  |
-| ...            | ...                 | ...   |
+**IMPORTANT: Include BOTH JSON and MCP paths**
+
+| JSON Path                | MCP Path      | Code Implementation | Value |
+| ------------------------ | ------------- | ------------------- | ----- |
+| `variables.spacing.2`    | `spacing/2`   | `metrics.spacing2`  | 2px   |
+| `variables.spacing.4`    | `spacing/4`   | `metrics.spacing4`  | 4px   |
+| `variables.spacing.8`    | `spacing/8`   | `metrics.spacing8`  | 8px   |
+| `variables.spacing.16`   | `spacing/16`  | `metrics.spacing16` | 16px  |
+| `variables.spacing.24`   | `spacing/24`  | `metrics.spacing24` | 24px  |
+| ...                      | ...           | ...                 | ...   |
 
 **Instructions:**
 
-- List ALL spacing values from Figma
-- Format: `spacing/X` → `metrics.spacingX`
+- List ALL spacing values from JSON files
+- **Include BOTH JSON path AND MCP path** for each variable
+- Extract from: `collections[].variables.spacing.*`
+- Format: `spacing.X` → `metrics.spacingX`
 - Include pixel value for reference
+- **MCP path format**: `spacing/X` (no `variables.` prefix)
+
+**Path Conversion:**
+```
+JSON: variables.spacing.16  → MCP: spacing/16  → Code: metrics.spacing16
+```
 
 **Usage Example:**
 
@@ -536,23 +1034,37 @@ Create tables for EACH color category found in your Figma design:
 // ❌ WRONG - Hardcoded
 padding: 16,
 
-// ✅ CORRECT - Using mapped token
+// ✅ CORRECT - Using mapped token (works with BOTH JSON and MCP)
 import { metrics } from '@/themes/metrics'
-padding: metrics.spacing16,  // From Figma spacing/16
+padding: metrics.spacing16,  // From variables.spacing.16 OR spacing/16
 ```
 
 ## 3. RADIUS VARIABLE MAPPING
 
-| Figma Variable | Code Implementation | Value |
-| -------------- | ------------------- | ----- |
-| `radius/4`     | `metrics.radius4`   | 4px   |
-| `radius/8`     | `metrics.radius8`   | 8px   |
-| ...            | ...                 | ...   |
+**IMPORTANT: Include BOTH JSON and MCP paths**
+
+| JSON Path                | MCP Path      | Code Implementation                    | Value  |
+| ------------------------ | ------------- | -------------------------------------- | ------ |
+| `variables.radius.0`     | `radius/0`    | `metrics.radius0`                      | 0px    |
+| `variables.radius.8`     | `radius/8`    | `metrics.radius8`                      | 8px    |
+| `variables.radius.12`    | `radius/12`   | `metrics.radius12`                     | 12px   |
+| `variables.radius.round` | `radius/round`| `metrics.radiusRound`                  | 1000px |
+| ...                      | ...           | ...                                    | ...    |
 
 **Instructions:**
 
-- List ALL radius values from Figma
-- Format: `radius/X` → `metrics.radiusX`
+- List ALL radius values from JSON files
+- **Include BOTH JSON path AND MCP path** for each variable
+- Extract from: `collections[].variables.radius.*`
+- Handle both named keys (round) and numeric keys (0, 8, 12)
+- Special case: `round` typically has value 1000 or 9999
+- **MCP path format**: `radius/X` (no `variables.` prefix)
+
+**Path Conversion:**
+```
+JSON: variables.radius.8     → MCP: radius/8     → Code: metrics.radius8
+JSON: variables.radius.round → MCP: radius/round → Code: metrics.radiusRound
+```
 
 **Usage Example:**
 
@@ -560,83 +1072,336 @@ padding: metrics.spacing16,  // From Figma spacing/16
 // ❌ WRONG
 borderRadius: 8,
 
-// ✅ CORRECT
-borderRadius: metrics.radius8,
+// ✅ CORRECT (works with BOTH JSON and MCP)
+borderRadius: metrics.radius8,  // From variables.radius.8 OR radius/8
 ```
 
 ## 4. ICON SIZE VARIABLE MAPPING
 
-| Figma Variable | Code Implementation  | Value |
-| -------------- | -------------------- | ----- |
-| `icon-size/16` | `metrics.iconSize16` | 16px  |
-| `icon-size/24` | `metrics.iconSize24` | 24px  |
-| ...            | ...                  | ...   |
+**IMPORTANT: Include BOTH JSON and MCP paths**
+
+| JSON Path                 | MCP Path        | Code Implementation  | Value |
+| ------------------------- | --------------- | -------------------- | ----- |
+| `variables.icon-size.16`  | `icon-size/16`  | `metrics.iconSize16` | 16px  |
+| `variables.icon-size.20`  | `icon-size/20`  | `metrics.iconSize20` | 20px  |
+| `variables.icon-size.24`  | `icon-size/24`  | `metrics.iconSize24` | 24px  |
+| `variables.icon-size.32`  | `icon-size/32`  | `metrics.iconSize32` | 32px  |
+| ...                       | ...             | ...                  | ...   |
 
 **Instructions:**
 
-- List ALL icon size values from Figma
-- Format: `icon-size/X` → `metrics.iconSizeX`
+- List ALL icon size values from JSON files
+- **Include BOTH JSON path AND MCP path** for each variable
+- Extract from: `collections[].variables.icon-size.*` (if present)
+- Format: `icon-size.X` → `metrics.iconSizeX`
+- **MCP path format**: `icon-size/X` (no `variables.` prefix)
+
+**Path Conversion:**
+```
+JSON: variables.icon-size.24 → MCP: icon-size/24 → Code: metrics.iconSize24
+```
 
 ## 5. TYPOGRAPHY VARIABLE MAPPING
 
+**IMPORTANT: Include BOTH JSON and MCP paths**
+
 ### Font Sizes
 
-| Figma Variable                 | Code Implementation | Value |
-| ------------------------------ | ------------------- | ----- |
-| `typography/font-size/text/xs` | `fontSizes.xs`      | 12px  |
-| `typography/font-size/text/sm` | `fontSizes.sm`      | 14px  |
-| ...                            | ...                 | ...   |
+| JSON Path                           | MCP Path                     | Code Implementation | Value |
+| ----------------------------------- | ---------------------------- | ------------------- | ----- |
+| `variables.typography.font-size.xs` | `typography/font-size/xs`    | `fontSizes.xs`      | 12px  |
+| `variables.typography.font-size.sm` | `typography/font-size/sm`    | `fontSizes.sm`      | 14px  |
+| `variables.typography.font-size.md` | `typography/font-size/md`    | `fontSizes.md`      | 16px  |
+| `variables.typography.font-size.lg` | `typography/font-size/lg`    | `fontSizes.lg`      | 18px  |
+| `variables.typography.font-size.xl` | `typography/font-size/xl`    | `fontSizes.xl`      | 20px  |
+| ...                                 | ...                          | ...                 | ...   |
 
 ### Font Weights
 
-| Figma Variable                   | Code Implementation   | Value |
-| -------------------------------- | --------------------- | ----- |
-| `typography/font-weight/regular` | `fontWeights.regular` | '400' |
-| `typography/font-weight/medium`  | `fontWeights.medium`  | '500' |
-| ...                              | ...                   | ...   |
+| JSON Path                                   | MCP Path                         | Code Implementation   | Value |
+| ------------------------------------------- | -------------------------------- | --------------------- | ----- |
+| `variables.typography.font-weight.regular`  | `typography/font-weight/regular` | `fontWeights.regular` | '400' |
+| `variables.typography.font-weight.medium`   | `typography/font-weight/medium`  | `fontWeights.medium`  | '500' |
+| `variables.typography.font-weight.semibold` | `typography/font-weight/semibold`| `fontWeights.semibold`| '600' |
+| `variables.typography.font-weight.bold`     | `typography/font-weight/bold`    | `fontWeights.bold`    | '700' |
+| ...                                         | ...                              | ...                   | ...   |
 
 ### Font Family
 
-| Figma Variable           | Code Implementation | Value              |
-| ------------------------ | ------------------- | ------------------ |
-| `typography/font-family` | `fonts.family`      | 'YourFontName'     |
-| Font(Regular)            | `fonts.regular`     | 'YourFont-Regular' |
-| Font(Medium)             | `fonts.medium`      | 'YourFont-Medium'  |
-| Font(Bold)               | `fonts.bold`        | 'YourFont-Bold'    |
+| JSON Path                          | MCP Path                   | Code Implementation | Value         |
+| ---------------------------------- | -------------------------- | ------------------- | ------------- |
+| `variables.typography.font-family` | `typography/font-family`   | `fonts.family`      | 'IBMPlexSans' |
+| Font(Regular)                     | `fonts.regular`     | 'IBMPlexSans-Regular' |
+| Font(Medium)                      | `fonts.medium`      | 'IBMPlexSans-Medium'  |
+| Font(Bold)                        | `fonts.bold`        | 'IBMPlexSans-Bold'    |
+
+**Note:** The font-family value from JSON is the base name. Map to actual font file names in your project.
 
 ### Line Heights (if applicable)
 
-| Figma Variable                   | Code Implementation | Value |
-| -------------------------------- | ------------------- | ----- |
-| `typography/line-height/text/xs` | `lineHeights.xs`    | 18px  |
-| `typography/line-height/text/sm` | `lineHeights.sm`    | 20px  |
-| ...                              | ...                 | ...   |
+| JSON Path                              | MCP Path                        | Code Implementation | Value |
+| -------------------------------------- | ------------------------------- | ------------------- | ----- |
+| `variables.typography.line-height.xs`  | `typography/line-height/xs`     | `lineHeights.xs`    | 18px  |
+| `variables.typography.line-height.sm`  | `typography/line-height/sm`     | `lineHeights.sm`    | 20px  |
+| `variables.typography.line-height.md`  | `typography/line-height/md`     | `lineHeights.md`    | 22px  |
+| ...                                    | ...                             | ...                 | ...   |
+
+### Letter Spacing (if applicable)
+
+| JSON Path                                  | MCP Path                           | Code Implementation    | Value |
+| ------------------------------------------ | ---------------------------------- | ---------------------- | ----- |
+| `variables.typography.letter-spacing.xs`   | `typography/letter-spacing/xs`     | `letterSpacing.xs`     | 0     |
+| `variables.typography.letter-spacing.md`   | `typography/letter-spacing/md`     | `letterSpacing.md`     | 0     |
+| `variables.typography.letter-spacing.4xl`  | `typography/letter-spacing/4xl`    | `letterSpacing._4xl`   | -2    |
+| ...                                        | ...                                | ...                    | ...   |
 
 **Instructions:**
 
-- List ALL typography variables from Figma
-- Adapt font family names to match your actual fonts
-- Include line heights if your design system uses them
+- List ALL typography variables from JSON files
+- **Include BOTH JSON path AND MCP path** for each variable
+- Extract from: `collections[].variables.typography.*`
+- Font family value from JSON may need to be mapped to actual font file names
+- Include line heights and letter spacing if present in your design system
+- **MCP path format**: `typography/[property]/[value]` (no `variables.` prefix)
+
+**Path Conversion:**
+```
+JSON: variables.typography.font-size.md      → MCP: typography/font-size/md      → Code: fontSizes.md
+JSON: variables.typography.font-weight.medium → MCP: typography/font-weight/medium → Code: fontWeights.medium
+JSON: variables.typography.line-height.xs    → MCP: typography/line-height/xs    → Code: lineHeights.xs
+```
+
+---
+
+### 3.3 MCP Path Format Rules and Pattern Matching
+
+**Understanding MCP Format:**
+
+When AI uses MCP `get_variable_defs`, it receives variables in a **flat path format** using slashes (`/`) instead of the nested JSON structure:
+
+**MCP Format Examples:**
+```
+color/icon/white: #fcfcfc
+color/text/text-primary: #292929
+typography/font-size/xs: 12
+spacing/2: 2
+radius/8: 8
+icon-size/24: 24
+```
+
+**Pattern Matching Rules for AI:**
+
+When generating code from MCP variable paths, use these transformation rules:
+
+#### 1. Color Variables
+
+**MCP Pattern:** `color/[category]/[name]`
+
+**Transformation Rules:**
+```
+MCP Path                       → Code Token
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+color/icon/white               → colors.icon.white
+color/icon/primary             → colors.icon.primary
+color/text/text-primary        → colors.text.primary
+color/background/layer-01      → colors.background.layer01
+color/button/primary           → colors.button.primary
+color/feedback/text/error      → colors.feedback.text.error
+color/Red/50                   → palette.red._50  (uppercase → palette)
+color/Neutral/10               → palette.neutral._10
+```
+
+**Rules:**
+- Remove `color/` prefix
+- Convert category to nested object access
+- If category starts with uppercase (Red, Blue, Neutral) → use `palette.[lowercase]._[value]`
+- Otherwise → use `colors.[category].[name]`
+- Convert hyphens/underscores in property names: `text-primary` → `primary`, `layer-01` → `layer01`
+
+#### 2. Spacing Variables
+
+**MCP Pattern:** `spacing/[value]`
+
+**Transformation Rules:**
+```
+MCP Path      → Code Token
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+spacing/2     → metrics.spacing2
+spacing/4     → metrics.spacing4
+spacing/16    → metrics.spacing16
+```
+
+**Rules:**
+- Remove `spacing/` prefix
+- Concatenate: `metrics.spacing` + `[value]`
+
+#### 3. Radius Variables
+
+**MCP Pattern:** `radius/[value]`
+
+**Transformation Rules:**
+```
+MCP Path       → Code Token
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+radius/0       → metrics.radius0
+radius/8       → metrics.radius8
+radius/round   → metrics.radiusRound
+```
+
+**Rules:**
+- Remove `radius/` prefix
+- Concatenate: `metrics.radius` + `[value]` (camelCase for named values)
+
+#### 4. Icon Size Variables
+
+**MCP Pattern:** `icon-size/[value]`
+
+**Transformation Rules:**
+```
+MCP Path       → Code Token
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+icon-size/16   → metrics.iconSize16
+icon-size/24   → metrics.iconSize24
+```
+
+**Rules:**
+- Remove `icon-size/` prefix
+- Concatenate: `metrics.iconSize` + `[value]`
+
+#### 5. Typography Variables
+
+**MCP Pattern:** `typography/[property]/[value]`
+
+**Transformation Rules:**
+```
+MCP Path                           → Code Token
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+typography/font-size/xs            → fontSizes.xs
+typography/font-size/md            → fontSizes.md
+typography/font-weight/regular     → fontWeights.regular
+typography/font-weight/medium      → fontWeights.medium
+typography/font-family             → fonts.family
+typography/line-height/xs          → lineHeights.xs
+typography/letter-spacing/4xl      → letterSpacing._4xl
+```
+
+**Rules:**
+- Extract property type: `font-size`, `font-weight`, `font-family`, `line-height`, `letter-spacing`
+- Map to corresponding code object:
+  - `font-size` → `fontSizes.[value]`
+  - `font-weight` → `fontWeights.[value]`
+  - `font-family` → `fonts.family`
+  - `line-height` → `lineHeights.[value]`
+  - `letter-spacing` → `letterSpacing.[value]` (numeric values get `_` prefix)
+
+#### 6. General Transformation Algorithm
+
+**Step-by-Step for AI:**
+
+1. **Identify the variable category** (first segment before `/`)
+   - `color` → Color mapping
+   - `spacing` → Spacing mapping
+   - `radius` → Radius mapping
+   - `icon-size` → Icon size mapping
+   - `typography` → Typography mapping
+
+2. **Apply category-specific rules** (see above)
+
+3. **Look up in mapping table** (from Section 1-5)
+   - Find the MCP path in the mapping table
+   - Use the corresponding "Code Implementation" column
+
+4. **Generate code** with the mapped token
+   ```typescript
+   // MCP: spacing/16
+   padding: metrics.spacing16
+
+   // MCP: color/text/text-primary
+   color: colors.text.primary
+   ```
+
+**Example Workflow:**
+
+```
+MCP Input: "spacing/16"
+Step 1: Category = "spacing"
+Step 2: Apply spacing rule → metrics.spacing + "16"
+Step 3: Look up "spacing/16" in mapping table → metrics.spacing16
+Step 4: Generate: padding: metrics.spacing16
+```
+
+---
 
 ## 6. COMPLETE USAGE EXAMPLE
 
-When AI generates code from Figma using `get_code`, it should transform:
+When AI generates code from Figma, it needs to map variable references from **EITHER** JSON or MCP format to the same code tokens:
+
+### Example A: From JSON Export (Setup Phase)
+
+**JSON Structure:**
+```json
+{
+  "variables": {
+    "spacing": { "16": { "values": { "STS_base": 16 } } },
+    "radius": { "8": { "values": { "STS_base": 8 } } },
+    "color": {
+      "background": { "layer-01": { "values": { "STS_base": "#efefef" } } },
+      "text": { "text-primary": { "values": { "STS_base": "#292929" } } }
+    },
+    "typography": {
+      "font-size": { "md": { "values": { "STS_base": 16 } } },
+      "font-weight": { "medium": { "values": { "STS_base": 500 } } }
+    }
+  }
+}
+```
+
+**Mapping Using JSON Paths:**
+```
+variables.spacing.16                     → metrics.spacing16
+variables.radius.8                       → metrics.radius8
+variables.color.background.layer-01      → colors.background.layer01
+variables.color.text.text-primary        → colors.text.primary
+variables.typography.font-size.md        → fontSizes.md
+variables.typography.font-weight.medium  → fontWeights.medium
+```
+
+### Example B: From MCP get_variable_defs (Implementation Phase)
 
-### Figma Design Properties (Example):
+**MCP Output:**
+```
+Spacing Variables:
+- spacing/16: 16
+
+Radius Variables:
+- radius/8: 8
+
+Color Variables:
+  Background Colors:
+  - color/background/layer-01: #efefef
+
+  Text Colors:
+  - color/text/text-primary: #292929
 
+Typography Variables:
+  Font Sizes:
+  - typography/font-size/md: 16
+
+  Font Weights:
+  - typography/font-weight/medium: 500
 ```
-Container:
-  - padding: spacing/16          ← Figma variable
-  - borderRadius: radius/8       ← Figma variable
-  - backgroundColor: color/background/bg-primary  ← Figma variable
 
-Text:
-  - color: color/text/text-primary               ← Figma variable
-  - fontSize: typography/font-size/text/md       ← Figma variable
-  - fontWeight: typography/font-weight/medium    ← Figma variable
+**Mapping Using MCP Paths:**
+```
+spacing/16                     → metrics.spacing16
+radius/8                       → metrics.radius8
+color/background/layer-01      → colors.background.layer01
+color/text/text-primary        → colors.text.primary
+typography/font-size/md        → fontSizes.md
+typography/font-weight/medium  → fontWeights.medium
 ```
 
-### Into React Native Code:
+### ✅ Both Formats → Same Code Implementation:
 
 ```typescript
 import React from 'react'
@@ -654,21 +1419,23 @@ const Component = () => {
 
 const styles = StyleSheet.create({
   container: {
-    padding: metrics.spacing16, // ← Mapped from spacing/16
-    borderRadius: metrics.radius8, // ← Mapped from radius/8
-    backgroundColor: colors.background.primary, // ← Mapped from color/background/bg-primary
+    padding: metrics.spacing16,            // ← From JSON: variables.spacing.16 OR MCP: spacing/16
+    borderRadius: metrics.radius8,         // ← From JSON: variables.radius.8 OR MCP: radius/8
+    backgroundColor: colors.background.layer01, // ← From JSON: variables.color.background.layer-01 OR MCP: color/background/layer-01
   },
   text: {
-    color: colors.text.primary, // ← Mapped from color/text/text-primary
-    fontSize: fontSizes.md, // ← Mapped from typography/font-size/text/md
-    fontWeight: fontWeights.medium, // ← Mapped from typography/font-weight/medium
-    fontFamily: fonts.medium, // ← Mapped from typography/font-family (Medium)
+    color: colors.text.primary,            // ← From JSON: variables.color.text.text-primary OR MCP: color/text/text-primary
+    fontSize: fontSizes.md,                // ← From JSON: variables.typography.font-size.md OR MCP: typography/font-size/md
+    fontWeight: fontWeights.medium,        // ← From JSON: variables.typography.font-weight.medium OR MCP: typography/font-weight/medium
+    fontFamily: fonts.medium,              // ← Based on font-family value
   },
 })
 
 export default Component
 ```
 
+**Key Point:** Regardless of whether the variable came from JSON exports (setup) or MCP (implementation), the final React Native code uses the **same theme tokens** for consistency.
+
 ## 7. CODE GENERATION RULES
 
 When generating code from Figma designs:
@@ -800,9 +1567,9 @@ alwaysApply: true
 
 **Important Notes:**
 - The above is a **TEMPLATE** - populate it with YOUR actual Figma variables
-- Run `get_variable_defs` first to get your complete list of variables
-- Create one mapping entry for EACH variable returned from Figma
-- Group variables logically by category
+- Read and parse the exported JSON files first to get your complete list of variables
+- Create one mapping entry for EACH variable found in the JSON files
+- Group variables logically by category (colors, spacing, typography, etc.)
 - Include all theming rules and styling constraints
 - The `alwaysApply: true` ensures AI always references this file
 
@@ -829,10 +1596,10 @@ See the template above for the complete structure. The key additions beyond just
 
 When implementing a design from Figma:
 
-1. **Get Figma code** using `get_code` MCP command
-2. **Identify Figma variables** in the generated code (e.g., `spacing/16`, `color/text/text-primary`)
+1. **Get Figma design code** using `get_design_context` tool
+2. **Identify Figma variable references** in the design (e.g., references to `spacing.16`, `color.text.primary`)
 3. **Refer to mapping table** in `.cursor/rules/figma-theming-and-styling.mdc`
-4. **Replace Figma variables** with the corresponding code tokens
+4. **Replace variable references** with the corresponding code tokens from your theme
 5. **Check existing metrics** before creating new values
 6. **Remove inline styles** and use StyleSheet.create()
 7. **Replace icon size props** with metrics tokens
@@ -842,18 +1609,18 @@ When implementing a design from Figma:
 **Example Transformation:**
 
 ```typescript
-// ❌ BEFORE (Raw code from Figma get_code - hardcoded values)
+// ❌ BEFORE (Raw code from Figma - hardcoded values)
 const styles = StyleSheet.create({
   container: {
-    padding: 16,                    // This was spacing/16 in Figma
-    backgroundColor: '#hexValue',   // This was color/background/bg-primary in Figma
-    borderRadius: 8,                // This was radius/8 in Figma
-    gap: 12,                        // This was spacing/12 in Figma
+    padding: 16,                    // This references variables.spacing.16
+    backgroundColor: '#hexValue',   // This references variables.color.background.primary
+    borderRadius: 8,                // This references variables.radius.md (value: 8)
+    gap: 12,                        // This references variables.spacing.12
   },
   title: {
-    fontSize: 16,                   // This was typography/font-size/text/md
-    fontWeight: '500',              // This was typography/font-weight/medium
-    color: '#hexValue',             // This was color/text/text-primary
+    fontSize: 16,                   // This references variables.typography.font-size.md
+    fontWeight: '500',              // This references variables.typography.font-weight.medium
+    color: '#hexValue',             // This references variables.color.text.primary
   }
 })
 
diff --git a/code-connect/docs/Variable_Update_Workflow.md b/code-connect/docs/Variable_Update_Workflow.md
new file mode 100644
index 0000000..b2d9bb1
--- /dev/null
+++ b/code-connect/docs/Variable_Update_Workflow.md
@@ -0,0 +1,795 @@
+# Variable Update Workflow - AI Instructions
+
+This document provides step-by-step instructions for AI agents to update existing theme variables when designers provide new or updated Figma variable JSON files.
+
+## 🚨 CRITICAL RULES - READ FIRST
+
+**MANDATORY Requirements for AI Agents:**
+
+1. **🚨 NEVER AUTO-SELECT MODE NAMES**
+   - When a JSON file contains multiple modes (e.g., "STS_base", "STS_dark", "Boro_USA_theme"), you MUST ask the user which mode to use
+   - DO NOT proceed with variable comparison until user confirms the mode selection
+   - DO NOT assume or guess which mode the user wants
+
+2. **🚨 ALWAYS ASK USER BEFORE PROCEEDING**
+   - If multiple modes exist in ANY collection, STOP immediately
+   - Present all available modes to the user
+   - Wait for explicit confirmation before continuing with comparison
+
+3. **🚨 BLOCK COMPARISON UNTIL CONFIRMATION**
+   - No variable comparison or extraction should begin until mode selection is confirmed
+   - This is a BLOCKING checkpoint - you cannot skip it
+
+4. **🚨 PROJECT VARIABLES OVERRIDE CORE VARIABLES**
+   - When the same variable exists in both Core_variables.json and project JSON, use the project JSON value
+   - Example: If `spacing.16` exists in both files, the project JSON value takes precedence
+
+5. **🚨 TWO-FILE WORKFLOW**
+   - Users typically provide TWO JSON files:
+     - **Core_variables.json**: Base design tokens (usually single mode "Value")
+     - **Project JSON** (e.g., STS_Variables.json): Semantic variables (often multiple modes)
+   - Process Core first, then Project JSON second
+   - Apply override rule: Project JSON values ALWAYS override Core JSON values
+
+---
+
+## Overview
+
+When designers export updated variable files from Figma, AI should:
+1. Read and parse both Core and Project JSON files
+2. **🚨 STOP if multiple modes detected - ask user for mode selection**
+3. Compare new variables against existing theme files (using user-confirmed mode)
+4. Detect changes (added, removed, modified variables)
+5. Present findings to user for review
+6. Update theme files while preserving custom code
+7. Regenerate design system rules if needed
+
+---
+
+## Step 1: Receive Updated JSON Files
+
+### 1.0 Understanding the Two-File Update Workflow
+
+When users provide updated Figma variables, they will typically give you **TWO** JSON files:
+
+1. **Core_variables.json** (Base Design Tokens)
+   - Contains foundational design tokens
+   - Usually has a **single mode** called "Value"
+   - Includes: spacing, radius, base color palettes, typography scales, icon sizes
+   - Example: `spacing.16.values.Value = 16`
+
+2. **Project-Specific JSON** (e.g., STS_Variables.json)
+   - Contains semantic/project-specific variables
+   - **Often has MULTIPLE modes** (e.g., "STS_base", "STS_dark", "Boro_USA_theme")
+   - May reference or override core variables
+   - Example: `spacing.16.values.STS_base = 20` (overrides Core)
+
+### Variable Override Behavior
+
+**IMPORTANT:** When a variable name appears in BOTH files:
+- ✅ **Project JSON value OVERRIDES Core JSON value**
+- This allows project-specific customization while maintaining core tokens
+
+**Example:**
+```
+Core_variables.json:
+  spacing.16.values.Value = 16
+
+STS_Variables.json:
+  spacing.16.values.STS_base = 20
+
+Result: Use 20 (from project JSON) - This is the updated value
+```
+
+### 1.1 Ask User for Updated Files
+
+**AI Prompt:**
+```
+"I see you have updated Figma variable JSON files. Please provide the paths to BOTH JSON files:
+1. Core_variables.json (base design tokens)
+2. Project-specific variables JSON (e.g., STS_Variables.json)"
+```
+
+### 1.2 Read New JSON Files
+
+Use the Read tool to load each new JSON file:
+```typescript
+Read({ file_path: "/path/to/Core_variables.json" })
+Read({ file_path: "/path/to/STS_Variables.json" })
+```
+
+### 1.3 Detect Multiple Modes (CRITICAL CHECKPOINT)
+
+**🚨 MANDATORY MODE DETECTION:**
+
+After reading each JSON file, immediately check the `modes` array:
+
+```typescript
+// Example detection logic
+const collection = jsonData.collections[0]
+const modes = collection.modes
+
+if (modes.length > 1) {
+  // 🚨 STOP - Multiple modes detected!
+  // MUST ask user before proceeding
+}
+```
+
+**Examples:**
+- ✅ Single mode: `"modes": ["Value"]` → Proceed automatically
+- 🚨 Multiple modes: `"modes": ["STS_base", "STS_dark", "Boro_USA_theme"]` → **STOP and ask user**
+
+### 1.4 Ask User for Mode Selection (IF MULTIPLE MODES EXIST)
+
+**🚨 THIS IS A BLOCKING CHECKPOINT - DO NOT SKIP**
+
+If multiple modes are detected in ANY collection:
+
+1. **STOP all comparison immediately**
+2. **List all available modes to the user**
+3. **Ask which mode to use**
+4. **Wait for explicit user confirmation**
+5. **Only proceed after receiving confirmation**
+
+**Required Question Template:**
+
+```
+🚨 MULTIPLE MODES DETECTED in [collection_name]
+
+I found [X] modes in this collection:
+- Mode 1: "[mode_name_1]"
+- Mode 2: "[mode_name_2]"
+- Mode 3: "[mode_name_3]"
+
+Which mode would you like to use for comparing and updating theme variables?
+
+Please confirm the mode name exactly as shown above.
+```
+
+**Example:**
+
+```
+🚨 MULTIPLE MODES DETECTED in STS_Variables
+
+I found 3 modes in this collection:
+- Mode 1: "STS_base"
+- Mode 2: "STS_dark"
+- Mode 3: "Boro_USA_theme"
+
+Which mode would you like to use for comparing and updating theme variables?
+
+Please confirm the mode name exactly as shown above.
+```
+
+### 1.5 Record User's Mode Selection
+
+After user responds, record their selection:
+```
+✅ User confirmed mode: "[selected_mode_name]"
+
+I will now compare variables using the "[selected_mode_name]" mode.
+Proceeding with comparison...
+```
+
+**🚨 ANTI-PATTERNS (WHAT NOT TO DO):**
+
+❌ **NEVER do this:**
+```
+// WRONG - Auto-selecting first mode
+const selectedMode = modes[0] // DON'T DO THIS!
+```
+
+❌ **NEVER do this:**
+```
+// WRONG - Assuming a mode without asking
+"I'll use STS_base mode..." // DON'T DO THIS!
+```
+
+✅ **CORRECT approach:**
+```
+// RIGHT - Always ask and wait
+"I found 3 modes: STS_base, STS_dark, Boro_USA_theme. Which mode should I use?"
+// WAIT for user response
+// THEN proceed with user-selected mode
+```
+
+### 1.6 Read Existing Theme Files
+
+Read current theme implementations to compare:
+```typescript
+Read({ file_path: "src/themes/colors.ts" })
+Read({ file_path: "src/themes/metrics.ts" })
+Read({ file_path: "src/themes/fonts.ts" })
+```
+
+---
+
+## Step 2: Analyze Changes
+
+### 2.1 Parse Both Old and New Variables
+
+**🚨 BEFORE YOU START:**
+- Ensure you have the user-confirmed mode name from Step 1.5
+- When extracting values, use `variable.values[userConfirmedMode]`
+- Apply override rule: Project JSON values override Core JSON values
+
+**For NEW JSON files:**
+
+1. **Process Core_variables.json first:**
+   - Extract all variables from `collections[].variables.*`
+   - Usually uses single mode "Value": `variable.values.Value`
+   - Organize by category (spacing, radius, color, typography, etc.)
+   - Store in memory
+
+2. **Process Project JSON second:**
+   - Extract all variables using **user-confirmed mode**
+   - ✅ Use: `variable.values[userConfirmedMode]`
+   - ❌ Don't use: `variable.values[modes[0]]` or hardcoded mode name
+   - Check if variable already exists from Core_variables.json
+   - **Override rule**: Project JSON values ALWAYS override Core JSON values
+
+3. **Example override scenario:**
+   ```typescript
+   // Core_variables.json
+   spacing.16.values.Value = 16
+
+   // STS_Variables.json (user confirmed mode: "STS_base")
+   spacing.16.values.STS_base = 20
+
+   // ✅ RESULT: New value is 20 (Project JSON overrides Core JSON)
+   // Compare this against existing theme: metrics.spacing16 = responsiveHeight(16)
+   // Change detected: 16 → 20
+   ```
+
+**For EXISTING theme files:**
+- Identify which values came from Figma (look for comments or standard naming)
+- Identify custom values added by developers (non-Figma values)
+- Build a map of current variable → value pairs
+- Current theme represents the "old" state to compare against
+
+### 2.2 Detect Changes
+
+Compare and categorize changes:
+
+**Added Variables:**
+- Variables that exist in new JSON but not in existing theme files
+- Example: `variables.spacing.14` didn't exist before
+
+**Removed Variables:**
+- Variables that existed in old theme but not in new JSON
+- ⚠️ **IMPORTANT**: Don't remove if it might be a custom developer addition
+
+**Modified Variables:**
+- Variables where the value changed
+- Example: `variables.color.Red.50` changed from `#ff6467` to `#ff7478`
+
+**Unchanged Variables:**
+- Variables with the same value in both old and new
+
+### 2.3 Generate Change Report
+
+Create a structured report for the user:
+
+```markdown
+## Figma Variable Changes Detected
+
+### Summary
+- **Added:** X variables
+- **Modified:** Y variables
+- **Removed:** Z variables
+- **Unchanged:** N variables
+
+### Details
+
+#### Added Variables (X)
+
+**Spacing:**
+- `spacing.14` → value: 14 → Code: `metrics.spacing14`
+
+**Colors:**
+- `color.Purple.A100` → value: #3c0366 → Code: `palette.purple._A100`
+
+#### Modified Variables (Y)
+
+**Colors:**
+- `color.Red.50`: `#ff6467` → `#ff7478`
+  - Code impact: `palette.red._50`
+
+**Spacing:**
+- `spacing.16`: `16` → `18`
+  - Code impact: `metrics.spacing16` (affects many components)
+
+#### Removed Variables (Z)
+
+**⚠️ These variables are in your theme but not in new JSON:**
+- `metrics.customPadding` - appears to be a custom value (KEEP)
+- `colors.legacy.primary` - may be custom (needs confirmation)
+
+**Action needed:** Should these be kept or removed?
+```
+
+---
+
+## Step 3: User Review and Approval
+
+### 3.1 Present Report to User
+
+Show the change report and ask for confirmation:
+
+**AI Prompt:**
+```
+"I've analyzed the changes between your current theme and the new Figma variables.
+Here's what I found:
+
+[Insert Change Report]
+
+Would you like me to:
+1. Apply all changes automatically (keeping custom values)
+2. Review each change individually
+3. Cancel and keep current theme"
+```
+
+### 3.2 Handle User Response
+
+**Option 1 - Apply All:**
+- Proceed to Step 4 with all changes
+
+**Option 2 - Review Individually:**
+- For each changed variable, ask:
+  ```
+  "Update [variable_name] from [old_value] to [new_value]? (yes/no)"
+  ```
+- Track user decisions for each change
+
+**Option 3 - Cancel:**
+- Exit workflow without changes
+
+---
+
+## Step 4: Apply Updates
+
+**🚨 REMINDER: Use User-Confirmed Mode**
+- All updates must use values from the **user-confirmed mode** (from Step 1.5)
+- When extracting values: Use `variable.values[userConfirmedMode]`
+- Apply override rule: Project JSON values override Core JSON values
+
+### 4.1 Update Colors (`src/themes/colors.ts`)
+
+**🚨 BEFORE YOU START:**
+- Ensure you're using values from the user-confirmed mode
+- Remember: Project JSON colors override Core JSON colors
+- Document overrides in comments when applicable
+
+**For added color variables:**
+1. Determine if it belongs in `colors` (semantic) or `palette` (scale-based)
+2. Find the correct nested location based on JSON structure
+3. Insert new property in appropriate location
+4. Use camelCase naming convention
+5. Extract value using: `variable.values[userConfirmedMode]`
+
+**For modified color variables:**
+1. Find existing color property
+2. Update hex value using user-confirmed mode
+3. Add comment indicating source and override status:
+   ```typescript
+   // Example with override
+   _50: '#ff7478', // Updated 2025-10-24 from STS_Variables (overrides Core: #ff6467)
+
+   // Example without override
+   primary: '#292929', // Updated 2025-10-24 from Core_variables
+   ```
+
+**For removed color variables:**
+1. Only remove if confirmed it's from Figma (not custom)
+2. Add deprecation comment if unsure
+
+**Example Edit:**
+
+```typescript
+// Adding new color
+const palette = {
+  red: {
+    _50: '#ff7478',  // Updated from Figma variables.color.Red.50
+    _100: '#ffcccc',
+  },
+  purple: {  // NEW from Figma
+    _A100: '#3c0366',  // From variables.color.Purple.A100
+  },
+}
+```
+
+### 4.2 Update Metrics (`src/themes/metrics.ts`)
+
+**🚨 BEFORE YOU START:**
+- Ensure you're using values from the user-confirmed mode
+- Remember: Project JSON metrics override Core JSON metrics
+- Document overrides in comments when applicable
+
+**For spacing variables:**
+- Add new: `spacing14: responsiveHeight(14),` (using user-confirmed mode value)
+- Modify existing: Update numeric value from user-confirmed mode
+- Keep custom metrics that don't match Figma variables
+- Document overrides if project value differs from core value
+
+**For radius variables:**
+- Add new radius values (using user-confirmed mode)
+- Update modified values (using user-confirmed mode)
+- Handle named keys (xs, sm, md) and numeric keys (4, 8)
+- Document overrides in comments
+
+**For icon sizes:**
+- Add new sizes (using user-confirmed mode)
+- Update existing sizes (using user-confirmed mode)
+- Document overrides in comments
+
+**Example Edit:**
+
+```typescript
+const metrics = {
+  // Spacing from Figma
+  spacing12: responsiveHeight(12),
+  spacing14: responsiveHeight(14), // NEW from variables.spacing.14
+  spacing16: responsiveHeight(20), // UPDATED from STS_Variables (overrides Core: 16)
+
+  // Custom spacing (preserve)
+  customPadding: responsiveHeight(22), // Custom developer value
+
+  // ... rest of metrics
+} as const
+```
+
+### 4.3 Update Typography (`src/themes/metrics.ts` and `src/themes/fonts.ts`)
+
+**🚨 BEFORE YOU START:**
+- Ensure you're using values from the user-confirmed mode
+- Remember: Project JSON typography overrides Core JSON typography
+- Document overrides in comments when applicable
+
+**Font sizes:**
+- Add new sizes (using user-confirmed mode value)
+- Update modified sizes (using user-confirmed mode value)
+- Use `responsiveFont()` wrapper
+- Document overrides in comments
+
+**Font weights:**
+- Add new weights (using user-confirmed mode value)
+- Update existing weights (using user-confirmed mode value)
+- Ensure string format: '400', '500'
+- Document overrides in comments
+
+**Font family (`src/themes/fonts.ts`):**
+- Update if font family name changed (using user-confirmed mode value)
+- Map to actual font file names
+- Document source in comments
+
+**Line heights and letter spacing:**
+- Add/update if present in JSON (using user-confirmed mode value)
+- Document overrides in comments
+
+### 4.4 Preserve Custom Values
+
+**Critical Rule:** Never remove or modify values that appear to be custom additions.
+
+**Identifying custom values:**
+- Not found in JSON variables
+- Has comments indicating "custom" or "legacy"
+- Named differently than Figma pattern (e.g., `buttonHeight` vs `spacing16`)
+
+**When in doubt:**
+- Ask user before removing
+- Add comment marking as "custom"
+- Keep the value
+
+---
+
+## Step 5: Update Design System Rules
+
+### 5.1 Check if Rules Need Updating
+
+Rules file needs updating if:
+- New variable categories added
+- Many new variables in existing categories
+- Variable naming patterns changed
+
+### 5.2 Regenerate Mapping Tables
+
+Update `.cursor/rules/figma-theming-and-styling.mdc`:
+
+**For each added variable:**
+- Add new row to appropriate mapping table
+- Include JSON path, code implementation, and value
+
+**For modified variables:**
+- Update the value column (hex value or numeric value)
+
+**For removed variables:**
+- Remove from mapping table (if confirmed as Figma variable)
+
+**Example update to rules file:**
+
+```markdown
+### Example: Color Palette (Base Colors with Numeric Scales)
+
+| JSON Path                  | Code Implementation | Hex Value |
+| -------------------------- | ------------------- | --------- |
+| `variables.color.Red.10`   | `palette.red._10`   | #fcfcfc   |
+| `variables.color.Red.50`   | `palette.red._50`   | #ff7478   | <!-- UPDATED -->
+| `variables.color.Purple.A100` | `palette.purple._A100` | #3c0366 | <!-- NEW -->
+```
+
+---
+
+## Step 6: Verification
+
+### 6.1 Run Type Checking
+
+**AI Prompt:**
+```
+"I've updated the theme files. Let me verify the changes by checking TypeScript types."
+```
+
+Use Bash tool:
+```bash
+npx tsc --noEmit
+```
+
+### 6.2 Search for Potential Issues
+
+**Check for:**
+- Unused imports
+- Duplicate property names
+- Syntax errors
+
+Use Grep tool to find usages:
+```typescript
+Grep({ pattern: "palette\\.red\\._50", path: "src/", output_mode: "count" })
+```
+
+### 6.3 Generate Update Summary
+
+Create final report for user:
+
+```markdown
+## Theme Update Complete
+
+### Changes Applied
+
+**Colors:**
+- Added 3 new palette colors (Purple.A100, Blue.A200, etc.)
+- Updated 2 existing colors (Red.50, Neutral.10)
+
+**Metrics:**
+- Added spacing14, spacing18
+- Updated spacing16 value (16px → 18px)
+
+**Typography:**
+- No changes
+
+**Custom values preserved:**
+- metrics.customPadding
+- colors.legacy.primary
+- All custom metrics kept intact
+
+### Files Modified
+- ✅ src/themes/colors.ts
+- ✅ src/themes/metrics.ts
+- ✅ .cursor/rules/figma-theming-and-styling.mdc
+
+### Next Steps
+1. Review the changes in your theme files
+2. Test components that use updated variables
+3. Run your app to ensure no visual regressions
+4. Consider updating components to use new variables where beneficial
+```
+
+---
+
+## Step 7: Handle Edge Cases
+
+### 7.1 Multi-Mode Variables
+
+**🚨 NOTE:** If you followed Step 1.3-1.5 correctly, you should have already detected multiple modes and obtained user confirmation. This section is a REMINDER of the expected behavior.
+
+If new JSON has multiple modes (e.g., light/dark themes) and you DID NOT ask in Step 1:
+
+**🚨 STOP IMMEDIATELY - You missed the blocking checkpoint!**
+
+Go back to Step 1.3 and follow the mandatory mode detection process:
+
+1. **STOP all work immediately**
+2. **List all available modes to the user**
+3. **Ask which mode to use** using the required template from Step 1.4
+4. **Wait for explicit user confirmation**
+5. **Record the confirmed mode**
+6. **Then resume the update workflow**
+
+**Required Question Template (from Step 1.4):**
+```
+🚨 MULTIPLE MODES DETECTED in [collection_name]
+
+I found [X] modes in this collection:
+- Mode 1: "[mode_name_1]"
+- Mode 2: "[mode_name_2]"
+- Mode 3: "[mode_name_3]"
+
+Which mode would you like to use for comparing and updating theme variables?
+
+Please confirm the mode name exactly as shown above.
+```
+
+**After Mode Confirmation:**
+
+If the user wants to explore other options beyond single-mode update:
+
+```
+✅ User confirmed mode: "[selected_mode_name]"
+
+I will update your theme using the "[selected_mode_name]" mode.
+
+Additional options available:
+1. Update using [selected_mode_name] mode only (recommended)
+2. Generate separate theme files for each mode
+3. Add mode switching support (advanced)
+
+Would you like to proceed with option 1, or explore other options?
+```
+
+**Default behavior:** Proceed with option 1 (single mode update) unless user explicitly requests multi-mode support.
+
+### 7.2 Breaking Changes
+
+If a widely-used variable is removed or significantly changed:
+
+**Warning prompt:**
+```
+"⚠️ Warning: 'spacing.16' changed from 16px to 18px.
+This variable is used in 47 files. This may cause visual changes.
+
+Recommendation:
+- Review visual impact before applying
+- Consider creating a new variable (spacing18) instead
+- Keep spacing16 at old value for backward compatibility"
+```
+
+### 7.3 Conflicting Collections
+
+**🚨 IMPORTANT:** This is NOT a conflict - this is expected override behavior!
+
+If multiple JSON files define the same variable with different values:
+
+**DO NOT ask the user** - Apply the override rule automatically:
+
+**✅ CORRECT Behavior:**
+```
+Variable 'color.Red.50' is defined in both files:
+- Core_variables.json: #ff6467
+- STS_Variables.json: #ff7478
+
+✅ Using Project JSON value: #ff7478 (Project overrides Core)
+
+This is expected behavior - project-specific values customize the core design tokens.
+```
+
+**When to Actually Ask User:**
+
+Only ask if there's a REAL conflict (two project-level JSON files with different values):
+
+```
+"Conflict detected: 'color.Red.50' is defined in both:
+- STS_Variables.json: #ff7478
+- Boro_Variables.json: #ff6467
+
+Both are project-level files. Which should take precedence?"
+```
+
+**But in normal two-file workflow (Core + Project):**
+- ✅ **Always use Project JSON value** - no question needed
+- This is documented in the CRITICAL RULES section
+- Document the override in comments when updating theme files
+
+---
+
+## Best Practices for AI
+
+### DO:
+- ✅ **ALWAYS** stop and ask for mode selection when multiple modes detected
+- ✅ **ALWAYS** use user-confirmed mode when extracting values
+- ✅ **ALWAYS** apply override rule: Project JSON overrides Core JSON
+- ✅ Always present changes for user review before applying
+- ✅ Preserve all custom developer additions
+- ✅ Add comments indicating Figma source, mode, and override status
+- ✅ Document which file values came from (Core vs Project)
+- ✅ Handle edge cases gracefully
+- ✅ Generate comprehensive reports
+- ✅ Update design system rules to stay in sync
+
+### DON'T:
+- ❌ **NEVER** auto-select modes without user confirmation
+- ❌ **NEVER** use `modes[0]` or hardcoded mode names
+- ❌ **NEVER** ask about Core vs Project conflicts (apply override rule automatically)
+- ❌ Never auto-remove variables without confirmation
+- ❌ Never modify custom developer code
+- ❌ Never apply changes without user approval for updates
+- ❌ Never assume variable purpose without checking usage
+- ❌ Never break existing functionality
+
+### Comment Best Practices:
+
+```typescript
+// Good comments - showing source and overrides
+spacing16: responsiveHeight(20), // Updated 2025-10-24 from STS_Variables.spacing.16 (mode: STS_base, overrides Core: 16)
+spacing18: responsiveHeight(18), // Updated 2025-10-24 from Core_variables.spacing.18 (mode: Value)
+purple: { _A100: '#3c0366' }, // Added 2025-10-24 from STS_Variables.color.Purple.A100 (mode: STS_base)
+
+// Custom values should be marked
+customButtonHeight: responsiveHeight(44), // Custom - not from Figma
+```
+
+### Mode Selection Best Practices:
+
+```typescript
+// ❌ WRONG - Auto-selecting mode
+const selectedMode = modes[0] // DON'T DO THIS!
+
+// ❌ WRONG - Hardcoded mode name
+const value = variable.values["STS_base"] // DON'T DO THIS!
+
+// ✅ CORRECT - Using user-confirmed mode
+const userConfirmedMode = "STS_base" // From Step 1.5 user confirmation
+const value = variable.values[userConfirmedMode] // CORRECT!
+```
+
+---
+
+## Troubleshooting
+
+### Issue: Type Errors After Update
+
+**Solution:**
+1. Check for duplicate properties
+2. Verify `as const` is present
+3. Run `npx tsc --noEmit` to see specific errors
+4. Fix based on TypeScript feedback
+
+### Issue: Visual Regressions
+
+**Solution:**
+1. Identify which variable changed
+2. Check usage with Grep tool
+3. Either:
+   - Revert the specific value
+   - Update components to work with new value
+   - Create new variable for backward compatibility
+
+### Issue: Missing Variables
+
+**Solution:**
+1. Verify JSON files are complete exports
+2. Check if variable was renamed in Figma
+3. Ask user if variable should be deprecated or recreated
+
+---
+
+## Summary Checklist
+
+Before completing the update workflow, verify:
+
+- [ ] **All JSON files read successfully** (both Core and Project JSON)
+- [ ] **Mode detection performed** (checked for multiple modes in each collection)
+- [ ] **User confirmed mode** (if multiple modes existed, obtained explicit confirmation)
+- [ ] **Override rule applied** (Project JSON values override Core JSON values)
+- [ ] **Used user-confirmed mode** for all value extractions (`variable.values[userConfirmedMode]`)
+- [ ] Change report generated and shown to user
+- [ ] User approved changes
+- [ ] Colors updated (added/modified) using user-confirmed mode
+- [ ] Metrics updated (spacing/radius/icon sizes) using user-confirmed mode
+- [ ] Typography updated (if changed) using user-confirmed mode
+- [ ] Custom values preserved
+- [ ] Comments added documenting source, mode, and override status
+- [ ] Design system rules updated
+- [ ] TypeScript type checking passed
+- [ ] Summary report provided to user
+- [ ] No breaking changes introduced without warning
+- [ ] **No modes auto-selected** (confirmed user was asked if multiple modes existed)
+- [ ] **Override documentation added** to comments where Project overrides Core
+

From b0dd8b940d033c33bc27bde7e5b608e378155502 Mon Sep 17 00:00:00 2001
From: "hang.nguyen" <hang.nguyen@saigontechnology.com>
Date: Fri, 24 Oct 2025 11:37:50 +0700
Subject: [PATCH 12/13] minor: update DatePicker figma code connect

---
 code-connect/components/DatePicker.figma.tsx | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/code-connect/components/DatePicker.figma.tsx b/code-connect/components/DatePicker.figma.tsx
index 8ab3934..f436017 100644
--- a/code-connect/components/DatePicker.figma.tsx
+++ b/code-connect/components/DatePicker.figma.tsx
@@ -2,19 +2,9 @@ import React from 'react'
 import DatePicker from 'react-native-date-picker'
 import figma from '@figma/code-connect'
 
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
+const DATE_PICKER_FIGMA_URL = '<FIGMA_DATE_PICKER>'
 
-figma.connect(
-  DatePicker,
-  'https://www.figma.com/design/JfmuXTpcFBa0xj3JzwNtxx/Saigon-Technology_MobilePortal?node-id=924-13429&m=dev',
-  {
-    props: {},
-    example: props => <DatePicker mode="date" date={new Date()} {...props} />,
-  },
-)
+figma.connect(DatePicker, DATE_PICKER_FIGMA_URL, {
+  props: {},
+  example: props => <DatePicker mode="date" date={new Date()} {...props} />,
+})

From 548315d8b29a24ea30317d6aa556157de6773622 Mon Sep 17 00:00:00 2001
From: "hang.nguyen" <hang.nguyen@saigontechnology.com>
Date: Fri, 24 Oct 2025 13:21:01 +0700
Subject: [PATCH 13/13] feat: update incorrect code connect path

---
 code-connect/components/DatePicker.figma.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code-connect/components/DatePicker.figma.tsx b/code-connect/components/DatePicker.figma.tsx
index f436017..92d453f 100644
--- a/code-connect/components/DatePicker.figma.tsx
+++ b/code-connect/components/DatePicker.figma.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import DatePicker from 'react-native-date-picker'
 import figma from '@figma/code-connect'
 
-const DATE_PICKER_FIGMA_URL = '<FIGMA_DATE_PICKER>'
+const DATE_PICKER_FIGMA_URL = '<FIGMA_WHEEL_PICKER>'
 
 figma.connect(DatePicker, DATE_PICKER_FIGMA_URL, {
   props: {},