{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "name": "Auth Inputs Showcase",
      "width": 1440,
      "fill": "$bg-page",
      "layout": "vertical",
      "gap": 80,
      "padding": [80, 120],
      "children": [
        {
          "type": "frame",
          "id": "AuthInputSection",
          "name": "Auth Inputs Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 48,
          "children": [
            {
              "type": "frame",
              "name": "sectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "shBadge",
                  "fill": "#FF5C0018",
                  "cornerRadius": 100,
                  "padding": [6, 14],
                  "children": [
                    {
                      "type": "text",
                      "name": "badgeText",
                      "fill": "$orange-primary",
                      "content": "AUTH INPUTS",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "500",
                      "letterSpacing": 2
                    }
                  ]
                },
                {
                  "type": "text",
                  "name": "shTitle",
                  "fill": "$text-primary",
                  "content": "Authentication Inputs",
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 42,
                  "fontWeight": "normal",
                  "letterSpacing": -1
                },
                {
                  "type": "text",
                  "name": "shDesc",
                  "fill": "$text-tertiary",
                  "textGrowth": "fixed-width",
                  "width": 600,
                  "content": "Form inputs for login, registration, and verification flows.",
                  "lineHeight": 1.6,
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 16
                }
              ]
            },
            {
              "type": "frame",
              "name": "inputsGrid",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 32,
              "children": [
                {
                  "type": "frame",
                  "id": "TextInputRow",
                  "name": "Text Inputs Row",
                  "width": "fill_container",
                  "fill": "$bg-surface",
                  "cornerRadius": 16,
                  "stroke": { "thickness": 1, "fill": "$border-subtle" },
                  "layout": "vertical",
                  "gap": 24,
                  "padding": 40,
                  "children": [
                    {
                      "type": "text",
                      "name": "rowLabel",
                      "fill": "$text-secondary",
                      "content": "Text Inputs",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "name": "inputsContainer",
                      "gap": 24,
                      "children": [
                        {
                          "type": "frame",
                          "id": "AuthInput_Text_Default",
                          "name": "Atom/AuthInput/Text/Default",
                          "reusable": true,
                          "width": 320,
                          "height": 48,
                          "fill": "$bg-elevated",
                          "cornerRadius": 10,
                          "stroke": { "thickness": 1, "fill": "$border-default" },
                          "padding": [0, 16],
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "text",
                              "id": "AuthInput_Text_Placeholder",
                              "name": "placeholder",
                              "fill": "$text-muted",
                              "content": "Email hoặc số điện thoại",
                              "fontFamily": "Roboto",
                              "fontSize": 14
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "AuthInput_Text_Filled",
                          "name": "Atom/AuthInput/Text/Filled",
                          "reusable": true,
                          "width": 320,
                          "height": 48,
                          "fill": "$bg-elevated",
                          "cornerRadius": 10,
                          "stroke": { "thickness": 1, "fill": "$border-focus" },
                          "padding": [0, 16],
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "text",
                              "id": "AuthInput_Text_Value",
                              "name": "value",
                              "fill": "$text-primary",
                              "content": "0912345678",
                              "fontFamily": "Roboto",
                              "fontSize": 14
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "AuthInput_Text_Error",
                          "name": "Atom/AuthInput/Text/Error",
                          "reusable": true,
                          "width": 320,
                          "layout": "vertical",
                          "gap": 6,
                          "children": [
                            {
                              "type": "frame",
                              "name": "inputWrapper",
                              "width": "fill_container",
                              "height": 48,
                              "fill": "$bg-elevated",
                              "cornerRadius": 10,
                              "stroke": { "thickness": 1, "fill": "$status-error" },
                              "padding": [0, 16],
                              "alignItems": "center",
                              "children": [
                                {
                                  "type": "text",
                                  "name": "value",
                                  "fill": "$text-primary",
                                  "content": "invalid@email",
                                  "fontFamily": "Roboto",
                                  "fontSize": 14
                                }
                              ]
                            },
                            {
                              "type": "text",
                              "name": "errorText",
                              "fill": "$status-error",
                              "content": "Email không hợp lệ",
                              "fontFamily": "Roboto",
                              "fontSize": 12
                            }
                          ]
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PasswordInputRow",
                  "name": "Password Inputs Row",
                  "width": "fill_container",
                  "fill": "$bg-surface",
                  "cornerRadius": 16,
                  "stroke": { "thickness": 1, "fill": "$border-subtle" },
                  "layout": "vertical",
                  "gap": 24,
                  "padding": 40,
                  "children": [
                    {
                      "type": "text",
                      "name": "rowLabel",
                      "fill": "$text-secondary",
                      "content": "Password Inputs",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "name": "inputsContainer",
                      "gap": 24,
                      "children": [
                        {
                          "type": "frame",
                          "id": "AuthInput_Password_Default",
                          "name": "Atom/AuthInput/Password/Default",
                          "reusable": true,
                          "width": 320,
                          "height": 48,
                          "fill": "$bg-elevated",
                          "cornerRadius": 10,
                          "stroke": { "thickness": 1, "fill": "$border-default" },
                          "padding": [0, 16],
                          "justifyContent": "space_between",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "text",
                              "id": "AuthInput_Password_Placeholder",
                              "name": "placeholder",
                              "fill": "$text-muted",
                              "content": "Mật khẩu",
                              "fontFamily": "Roboto",
                              "fontSize": 14
                            },
                            {
                              "type": "icon_font",
                              "name": "toggleIcon",
                              "width": 18,
                              "height": 18,
                              "iconFontName": "eye-off",
                              "iconFontFamily": "lucide",
                              "fill": "$text-muted"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "AuthInput_Password_Visible",
                          "name": "Atom/AuthInput/Password/Visible",
                          "reusable": true,
                          "width": 320,
                          "height": 48,
                          "fill": "$bg-elevated",
                          "cornerRadius": 10,
                          "stroke": { "thickness": 1, "fill": "$border-focus" },
                          "padding": [0, 16],
                          "justifyContent": "space_between",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "text",
                              "name": "value",
                              "fill": "$text-primary",
                              "content": "myPassword123",
                              "fontFamily": "Roboto",
                              "fontSize": 14
                            },
                            {
                              "type": "icon_font",
                              "name": "toggleIcon",
                              "width": 18,
                              "height": 18,
                              "iconFontName": "eye",
                              "iconFontFamily": "lucide",
                              "fill": "$orange-primary"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "AuthInput_Password_Hidden",
                          "name": "Atom/AuthInput/Password/Hidden",
                          "reusable": true,
                          "width": 320,
                          "height": 48,
                          "fill": "$bg-elevated",
                          "cornerRadius": 10,
                          "stroke": { "thickness": 1, "fill": "$border-focus" },
                          "padding": [0, 16],
                          "justifyContent": "space_between",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "text",
                              "name": "masked",
                              "fill": "$text-primary",
                              "content": "••••••••••••",
                              "fontFamily": "Roboto",
                              "fontSize": 14,
                              "letterSpacing": 2
                            },
                            {
                              "type": "icon_font",
                              "name": "toggleIcon",
                              "width": 18,
                              "height": 18,
                              "iconFontName": "eye-off",
                              "iconFontFamily": "lucide",
                              "fill": "$text-muted"
                            }
                          ]
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PINInputRow",
                  "name": "PIN Inputs Row",
                  "width": "fill_container",
                  "fill": "$bg-surface",
                  "cornerRadius": 16,
                  "stroke": { "thickness": 1, "fill": "$border-subtle" },
                  "layout": "vertical",
                  "gap": 24,
                  "padding": 40,
                  "children": [
                    {
                      "type": "text",
                      "name": "rowLabel",
                      "fill": "$text-secondary",
                      "content": "PIN Inputs (Cashier/Staff)",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "name": "inputsContainer",
                      "gap": 24,
                      "alignItems": "start",
                      "children": [
                        {
                          "type": "frame",
                          "id": "AuthInput_PIN_Empty",
                          "name": "Atom/AuthInput/PIN/Empty",
                          "reusable": true,
                          "gap": 12,
                          "children": [
                            {
                              "type": "frame",
                              "name": "digit1",
                              "width": 56,
                              "height": 64,
                              "fill": "$bg-elevated",
                              "cornerRadius": 12,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            },
                            {
                              "type": "frame",
                              "name": "digit2",
                              "width": 56,
                              "height": 64,
                              "fill": "$bg-elevated",
                              "cornerRadius": 12,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            },
                            {
                              "type": "frame",
                              "name": "digit3",
                              "width": 56,
                              "height": 64,
                              "fill": "$bg-elevated",
                              "cornerRadius": 12,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            },
                            {
                              "type": "frame",
                              "name": "digit4",
                              "width": 56,
                              "height": 64,
                              "fill": "$bg-elevated",
                              "cornerRadius": 12,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            },
                            {
                              "type": "frame",
                              "name": "digit5",
                              "width": 56,
                              "height": 64,
                              "fill": "$bg-elevated",
                              "cornerRadius": 12,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            },
                            {
                              "type": "frame",
                              "name": "digit6",
                              "width": 56,
                              "height": 64,
                              "fill": "$bg-elevated",
                              "cornerRadius": 12,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "AuthInput_PIN_Partial",
                          "name": "Atom/AuthInput/PIN/Partial",
                          "reusable": true,
                          "gap": 12,
                          "children": [
                            {
                              "type": "frame",
                              "name": "digit1",
                              "width": 56,
                              "height": 64,
                              "fill": "$bg-elevated",
                              "cornerRadius": 12,
                              "stroke": { "thickness": 1, "fill": "$border-focus" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": [
                                {
                                  "type": "frame",
                                  "name": "dot",
                                  "width": 12,
                                  "height": 12,
                                  "fill": "$orange-primary",
                                  "cornerRadius": 6
                                }
                              ]
                            },
                            {
                              "type": "frame",
                              "name": "digit2",
                              "width": 56,
                              "height": 64,
                              "fill": "$bg-elevated",
                              "cornerRadius": 12,
                              "stroke": { "thickness": 1, "fill": "$border-focus" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": [
                                {
                                  "type": "frame",
                                  "name": "dot",
                                  "width": 12,
                                  "height": 12,
                                  "fill": "$orange-primary",
                                  "cornerRadius": 6
                                }
                              ]
                            },
                            {
                              "type": "frame",
                              "name": "digit3",
                              "width": 56,
                              "height": 64,
                              "fill": "$bg-elevated",
                              "cornerRadius": 12,
                              "stroke": { "thickness": 2, "fill": "$orange-primary" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            },
                            {
                              "type": "frame",
                              "name": "digit4",
                              "width": 56,
                              "height": 64,
                              "fill": "$bg-elevated",
                              "cornerRadius": 12,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            },
                            {
                              "type": "frame",
                              "name": "digit5",
                              "width": 56,
                              "height": 64,
                              "fill": "$bg-elevated",
                              "cornerRadius": 12,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            },
                            {
                              "type": "frame",
                              "name": "digit6",
                              "width": 56,
                              "height": 64,
                              "fill": "$bg-elevated",
                              "cornerRadius": 12,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            }
                          ]
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "OTPInputRow",
                  "name": "OTP Inputs Row",
                  "width": "fill_container",
                  "fill": "$bg-surface",
                  "cornerRadius": 16,
                  "stroke": { "thickness": 1, "fill": "$border-subtle" },
                  "layout": "vertical",
                  "gap": 24,
                  "padding": 40,
                  "children": [
                    {
                      "type": "text",
                      "name": "rowLabel",
                      "fill": "$text-secondary",
                      "content": "OTP Inputs (Customer Verification)",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "name": "inputsContainer",
                      "gap": 24,
                      "alignItems": "start",
                      "children": [
                        {
                          "type": "frame",
                          "id": "AuthInput_OTP_Empty",
                          "name": "Atom/AuthInput/OTP/Empty",
                          "reusable": true,
                          "gap": 8,
                          "children": [
                            {
                              "type": "frame",
                              "name": "d1",
                              "width": 48,
                              "height": 56,
                              "fill": "$bg-elevated",
                              "cornerRadius": 10,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            },
                            {
                              "type": "frame",
                              "name": "d2",
                              "width": 48,
                              "height": 56,
                              "fill": "$bg-elevated",
                              "cornerRadius": 10,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            },
                            {
                              "type": "frame",
                              "name": "d3",
                              "width": 48,
                              "height": 56,
                              "fill": "$bg-elevated",
                              "cornerRadius": 10,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            },
                            {
                              "type": "text",
                              "name": "separator",
                              "fill": "$text-muted",
                              "content": "—",
                              "fontFamily": "Roboto",
                              "fontSize": 20
                            },
                            {
                              "type": "frame",
                              "name": "d4",
                              "width": 48,
                              "height": 56,
                              "fill": "$bg-elevated",
                              "cornerRadius": 10,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            },
                            {
                              "type": "frame",
                              "name": "d5",
                              "width": 48,
                              "height": 56,
                              "fill": "$bg-elevated",
                              "cornerRadius": 10,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            },
                            {
                              "type": "frame",
                              "name": "d6",
                              "width": 48,
                              "height": 56,
                              "fill": "$bg-elevated",
                              "cornerRadius": 10,
                              "stroke": { "thickness": 1, "fill": "$border-default" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": []
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "AuthInput_OTP_Filled",
                          "name": "Atom/AuthInput/OTP/Filled",
                          "reusable": true,
                          "gap": 8,
                          "children": [
                            {
                              "type": "frame",
                              "name": "d1",
                              "width": 48,
                              "height": 56,
                              "fill": "$bg-elevated",
                              "cornerRadius": 10,
                              "stroke": { "thickness": 1, "fill": "$status-success" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": [
                                { "type": "text", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }
                              ]
                            },
                            {
                              "type": "frame",
                              "name": "d2",
                              "width": 48,
                              "height": 56,
                              "fill": "$bg-elevated",
                              "cornerRadius": 10,
                              "stroke": { "thickness": 1, "fill": "$status-success" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": [
                                { "type": "text", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }
                              ]
                            },
                            {
                              "type": "frame",
                              "name": "d3",
                              "width": 48,
                              "height": 56,
                              "fill": "$bg-elevated",
                              "cornerRadius": 10,
                              "stroke": { "thickness": 1, "fill": "$status-success" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": [
                                { "type": "text", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }
                              ]
                            },
                            {
                              "type": "text",
                              "name": "separator",
                              "fill": "$status-success",
                              "content": "—",
                              "fontFamily": "Roboto",
                              "fontSize": 20
                            },
                            {
                              "type": "frame",
                              "name": "d4",
                              "width": 48,
                              "height": 56,
                              "fill": "$bg-elevated",
                              "cornerRadius": 10,
                              "stroke": { "thickness": 1, "fill": "$status-success" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": [
                                { "type": "text", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }
                              ]
                            },
                            {
                              "type": "frame",
                              "name": "d5",
                              "width": 48,
                              "height": 56,
                              "fill": "$bg-elevated",
                              "cornerRadius": 10,
                              "stroke": { "thickness": 1, "fill": "$status-success" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": [
                                { "type": "text", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }
                              ]
                            },
                            {
                              "type": "frame",
                              "name": "d6",
                              "width": 48,
                              "height": 56,
                              "fill": "$bg-elevated",
                              "cornerRadius": 10,
                              "stroke": { "thickness": 1, "fill": "$status-success" },
                              "justifyContent": "center",
                              "alignItems": "center",
                              "children": [
                                { "type": "text", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }
                              ]
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "variables": {
    "bg-page": { "type": "color", "value": "#0A0A0B" },
    "bg-surface": { "type": "color", "value": "#111113" },
    "bg-elevated": { "type": "color", "value": "#1A1A1D" },
    "border-default": { "type": "color", "value": "#2A2A2E" },
    "border-subtle": { "type": "color", "value": "#1F1F23" },
    "border-focus": { "type": "color", "value": "#FF5C00" },
    "orange-primary": { "type": "color", "value": "#FF5C00" },
    "text-primary": { "type": "color", "value": "#FFFFFF" },
    "text-secondary": { "type": "color", "value": "#ADADB0" },
    "text-tertiary": { "type": "color", "value": "#8B8B90" },
    "text-muted": { "type": "color", "value": "#6B6B70" },
    "status-error": { "type": "color", "value": "#EF4444" },
    "status-success": { "type": "color", "value": "#22C55E" }
  }
}
